AngularJS学习第七天：ng-include指令

单纯的引用一段公共的html

动态的更换要引用的html模板

//控制器代码
$scope.changeTpl=function(){
    $scope.headerUrl=$scope.headerUrl=="views/header.html"? "views/header2.html":"views/header.html";
}
$scope.headerUrl="views/header.html";

//html代码
更换模板

被控制器引用进来的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

    

      

        
{{order.name}}
    
    
    


//footer.html

  我是footer
  

    
{{order.name}}

如果被引用进来的html模板不在控制器的作用域内，我们怎么改变它

  
    

      

        
{{order.name}}
    
    
    

• 如上图中的代码，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
    

      {{name}}
      

        
{{order.name}}
    
    

控制器内部，会显示 {{name}} => 222 ; 因为myTabCtrl控制器为根作用域的子控制器，子控制器内的变量显示，会以变量所在的控制器为准，如果子控制器内没有定义这个变量，那么 angular会在变量所在的控制器的父控制器中找，如果还是没找到那么就继续向上，直到找到，如果未找到则编译为空值

• 简单的原理解析 其实，这个东西很容易理解，我们来看下，运行时候的截图

我们在开发者工具中看到的请求

• 实际上angular就是用一个ajax去请求了我们写进 ng-include 中的url对应的html，然后放进我们调用 ng-include指令的地方，如果这个html中含有angular指令，那么编译之后，放过去