标签：angularjs $routeprovider template function
在angularjs官方文档关于$routeProvider的配置中，对template和templateUrl的配置有这么一段话
if it is a function, it will be called with the following parameters:
{Array.<Object>} - route parameters extracted from the current$location.path() by applying the current route读起来相当拗口，也不容易理解是什么意思。
简单来讲，template和temlateUrl的值可以是一个函数，它可以带参数，分别返回一个html脚本和一个html脚本文件的URL。不带参数的情况很简单，返回对应的数据就可以了。那带参数的情况呢，参数是什么？上面提到是route parameters（路由参数）。最开始的时候，以为是$routeParams，所以我们把$routeParams作为参数。其实在定义函数的时候，我们传递的参数其实是形参。那实参来自哪呢？这个函数其实是在后台执行的，由angularJS将实参传递给函数，当然为了引用实参，我们还是需要在函数中设置形参的。那实参是怎么来的呢？上文有提到当前route的$location.path()。在path配置片段中，有提到path参数如果使用命名组（named group）的话，它的参数会被提取存储在$routeParams。这个在path中被提取的参数就是我们这里的实参。
看代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body ng-app="Main">
<div ng-controller="MainController">
<div ng-view></div>
</div>
</body>
</html>
<script src="scripts/angular.min.js" type="text/javascript"></script>
<script src="scripts/angular-route.min.js" type="text/javascript"></script>
<script type="text/javascript">
function template(data)
{
console.log(data);
return ‘<span>{{path}}</span><br /><span>{{url}}</span>‘;
}
var app = angular.module(‘Main‘, [‘ngRoute‘]);
app.controller(‘MainController‘, function ($scope, $location) {
$location.url(‘/test/1#?a=1#hash‘);
$scope.url = $location.url();
}).controller(‘controllor‘, function ($scope, $location, $route) {
$scope.path = $location.path();
});
app.config([‘$routeProvider‘, function ($routeProvider) {
$routeProvider.when(‘/test/:test‘, {
template: template,
controller: ‘controllor‘
});
}]);
</script>执行后，可以在控制台输出{"test":"1"}。
上文中，还展示了作用域的问题（$scope.url)。以及全局函数再angularjs的应用。
本文出自 “ForMeForYou” 博客，请务必保留此出处http://tancfeng.blog.51cto.com/4079342/1727699
angularjs $routeProvider template 函数及参数解惑
标签：angularjs $routeprovider template function
原文地址：http://tancfeng.blog.51cto.com/4079342/1727699
