文章/答案/技术大牛

发布

社区首页 >问答首页 >使用ngroute传递参数

问使用ngroute传递参数
EN

Stack Overflow用户

提问于 2015-10-12 02:21:39

回答 1查看 24.1K关注 0票数 6

这是我的

angularroute.html

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="AngularApp">
<head>
    <title></title>
    <script src="angular.js"></script>
    <script src="angular-route.js"></script>
    <script type="text/javascript">

        var AngApp = angular.module('AngularApp', ['ngRoute']);
        AngApp.config(function ($routeProvider) {
            $routeProvider
                .when('/Route1/:ID', {
                    templateUrl:'Route1.html',
                    controller:'Route1'

                })
                .when('/Route2', {
                    templateUrl: 'Route2.html',
                    controller:'Route2'
                })

                .otherwise({
                    redirectTo: '/'
                });
        });

    </script>

            </head>
            <body>

                <p>Routing Explained</p>
                <a href="#Route1/100">Route1</a><br>
                <a href="#Route2">Route2</a>
                <div ng-view>

                </div>

                <script src="Route.js"></script>       


            </body>
            </html>

Route.js文件包含。

angular.module('Route1').controller('Route1', function ($scope, $routeParams) {
    $scope.ID = $routeParams.ID;
});

angular.module('Route2').controller('Route2', function () {
});

Route1.html

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="Route1">
<head>
    <title></title>

</head>
<body ng-controller="Route1">


    {{ID}}

    {{4+10}}

</body>
</html>

问题是它加载了页面，但我无法接收到get参数值，在route1.html上，表达式也不会被求值。可能的问题是什么？谢谢。

javascript

angularjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-10-12 02:59:57

删除路由模板中不需要的所有内容。只有您在模板正文中添加的内容才是必需的。

这将包含在您在路由中配置的控制器中的angular into ng-view中。这是一个部分的，而不是一个完整的html文件。

此外，您的route.js代码也不正确。您可以创建一个模块angular.module('route', []).controller('route1Controller', function(){...})，并将其用作应用程序中的依赖项。

去掉括号，就像你在route.js中做的那样，你将得到一个已经定义好的模块。

请在下面或此fiddle中查看您的更新代码。

var AngApp = angular.module('AngularApp', ['ngRoute'])
	.controller('Route1Controller', Route1Controller)
	.controller('Route2Controller', Route2Controller);

AngApp.config(function ($routeProvider) {
    $routeProvider
        .when('/Route1/:ID', {
        templateUrl:'Route1.html',
        controller:'Route1Controller'

    })
        .when('/Route2', {
        templateUrl: 'Route2.html',
        controller:'Route2Controller'
    })

        .otherwise({
        redirectTo: '/'
    });
});

function Route1Controller($scope, $routeParams) {
    $scope.ID = $routeParams.ID;
}

function Route2Controller($scope) {

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.js"></script>

<div ng-app="AngularApp">
    <script type="text/ng-template" id="Route1.html">
        Route1
        {{ID}}

        {{4+10}}
    </script>
    <script type="text/ng-template" id="Route2.html">
        Route2

        {{4+10}}
    </script>
<p>Routing Explained</p>
                <a href="#Route1/100">Route1</a><br/>
                <a href="#Route2">Route2</a>
                <div ng-view>

                </div>
    </div>

票数 9

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33068511

复制

相似问题

问使用ngroute传递参数
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用ngroute传递参数EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用ngroute传递参数
EN