Javascript 使用 ngroute 传递参数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33068511/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
passing parameter with ngroute
提问by user3060119
here is my
这是我的
angularroute.html
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>
the Route.js file contains.
Route.js 文件包含。
angular.module('Route1').controller('Route1', function ($scope, $routeParams) {
$scope.ID = $routeParams.ID;
});
angular.module('Route2').controller('Route2', function () {
});
Route1.html
路由1.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>
the problem is it loads the page but i can not receive get the parameter value , on route1.html ,the expression also do not get evaluated . what could be the problem? thanks.
问题是它加载了页面，但我无法接收获取参数值，在 route1.html 上，表达式也没有得到评估。可能是什么问题呢？谢谢。
回答by AWolf
Remove everything that's not needed from your route template. Only the content that you added in your body of the template is required.
从路由模板中删除不需要的所有内容。仅需要您在模板正文中添加的内容。
That will be included by angular into ng-view with the controller that you have configured in your route. It's a partial and not a complete html file.
这将通过 angular 包含在您在路线中配置的控制器中的 ng-view 中。这是一个部分而不是完整的 html 文件。
Also your route.jscode is not correct. You could create a module angular.module('route', []).controller('route1Controller', function(){...})and use it as dependency in your app.
另外你的route.js代码不正确。您可以创建一个模块angular.module('route', []).controller('route1Controller', function(){...})并将其用作应用程序中的依赖项。
With-out the brackets like you did in your route.jsyou're getting a module that's already defined.
没有像您在您中所做的那样的括号，您route.js将获得一个已经定义的模块。
Please have a look at your updated code below or in this 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>