单纯的引用一段公共的html
<ng-include src="'views/footer.html'"></ng-include>
动态的更换要引用的html模板
//控制器代码
$scope.changeTpl=function(){
$scope.headerUrl=$scope.headerUrl=="views/header.html"? "views/header2.html":"views/header.html";
}
$scope.headerUrl="views/header.html";
//html代码
<button ng-click="changeTpl()">更换模板</button>
<ng-include src="headerUrl"></ng-include>
被控制器引用进来的html模板，能否使用控制器的变量？ 可以！！！
function myTabCtrl($scope) {
//订单列表
$scope.orders = [
{
status: '00901',
id: 10,
name: "秋装中长款毛呢外套 7796#姜黄色 S ",
total: '500',
count: '10',
time:"2016.12.12 15:45"
}]
}
//index.html
<body ng-app="" ng-controller="myTabCtrl">
<div ng-if="orders.length>0">
<div ng-repeat="order in orders">
<p>{{order.name}}</p>
</div>
</div>
<ng-include src="'views/footer.html'"></ng-include>
</body>
//footer.html
<footer>
我是footer
<div ng-repeat="order in orders">
<p>{{order.name}}</p>
</div>
</footer>
如果被引用进来的html模板不在控制器的作用域内，我们怎么改变它
<ng-include src="headerUrl"></ng-include>
<div ng-controller="myTabCtrl">
<div ng-repeat="order in orders">
<p>{{order.name}}</p>
</div>
</div>
<ng-include src="'views/footer.html'"></ng-include>
-
如上图中的代码，headerUrl 这个变量，并不在myTabCtrl这个控制器的作用域内，那么我们可以改变headerUrl 这个的值？
-
当然可以，我们可以通过 rootScope根作用域（相当于ng-app所在的作用域），也就是这个SPA中最顶级的作用域
//我们在需要更改根作用域的控制器中注入根作用域（```$rootScope```）
function myTabCtrl($scope,$rootScope) {
$scope.changeTpl=function(){
$rootScope.headerUrl=$rootScope.headerUrl=="views/header.html"? "views/header2.html":"views/header.html";
}
$rootScope.headerUrl="views/header.html";
}
-
根作用域上定义的变量，整个app都可以调用和更改（我们可以用它来实现路由切换之后，导航聚焦的问题）
-
如果 $rootScope 和 $scope出现同名变量，如
$rootScope.name="111";
$scope.name="2222";
//html
<div ng-controller="myTabCtrl">
{{name}}
<div ng-repeat="order in orders">
<p>{{order.name}}</p>
</div>
</div>
控制器内部，会显示 {{name}} => 222 ; 因为myTabCtrl控制器为根作用域的子控制器，子控制器内的变量显示，会以变量所在的控制器为准，如果子控制器内没有定义这个变量，那么 angular会在变量所在的控制器的父控制器中找，如果还是没找到那么就继续向上，直到找到，如果未找到则编译为空值
- 简单的原理解析 其实，这个东西很容易理解，我们来看下，运行时候的截图
2180072-f6f8f0f1a7fb690a.png
- 实际上angular就是用一个ajax去请求了我们写进 ng-include 中的url对应的html，然后放进我们调用 ng-include指令的地方，如果这个html中含有angular指令，那么编译之后，放过去
网友评论