Angular学习第七天

2017-03-12 本文已影响0人我是灰灰的小跟班

单纯的引用一段公共的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指令，那么编译之后，放过去

Angular学习第七天

猜你喜欢

热点阅读