使用 ngroute 传递参数 [英] passing parameter with ngroute
问题描述
这是我的
angularroute.html
<头><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',控制器:'Route1'}).when('/Route2', {templateUrl: 'Route2.html',控制器:'Route2'}).除此以外({重定向到:'/'});});<身体><p>路由解释</p><a href="#Route1/100">Route1</a><br><a href="#Route2">Route2</a><div ng-view><script src="Route.js"></script></html>
Route.js 文件包含.
angular.module('Route1').controller('Route1', function ($scope, $routeParams) {$scope.ID = $routeParams.ID;});angular.module('Route2').controller('Route2', function () {});Route1.html
<头><title></title><body ng-controller="Route1">{{ID}}{{4+10}}</html>问题是它加载了页面但我无法接收获取参数值，在 route1.html 上，表达式也没有得到评估.可能是什么问题呢?谢谢.
从路由模板中删除不需要的所有内容.仅需要您在模板正文中添加的内容.
这将通过 angular 包含在您在路由中配置的控制器的 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',控制器:'Route1Controller'}).when('/Route2', {templateUrl: 'Route2.html',控制器:'Route2Controller'}).除此以外({重定向到:'/'});});功能 Route1Controller($scope, $routeParams) {$scope.ID = $routeParams.ID;}功能 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">路线1{{ID}}{{4+10}}<script type="text/ng-template" id="Route2.html">路线2{{4+10}}<p>路由解释</p><a href="#Route1/100">Route1</a><br/><a href="#Route2">Route2</a><div ng-view>here is my
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.
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>
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.
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.
Also your route.js code is not correct. You could create a module angular.module('route', []).controller('route1Controller', function(){...}) and use it as dependency in your app.
With-out the brackets like you did in your route.js you're getting a module that's already defined.
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>
这篇关于使用 ngroute 传递参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
