Page 79 - AngularJS权威教程
P. 79

9.2  在指令中使用子作用域    59


                  <!-- 用户单击之前,href不会加载 -->                                                           1
                  <a href="{{ myHref }}">I'm feeling 404</a>
                  将插值生效的事件延迟两秒,来观察实际的行为:
                                                                                                     2
                  angular.module('myApp', [])
                  .run(function($rootScope, $timeout) {
                      $timeout(function() {                                                          3
                          $rootScope.myHref = 'http://google.com';
                      }, 2000);
                  });
                                                                                                     4
                  在线示例:http://jsbin.com/IgInopi/1/edit。
                  2. ng-src                                                                          5
                  AngularJS会告诉浏览器在ng-src对应的表达式生效之前不要加载图像:

                  <h1>WrongWay</h1>                                                                  6
                  <img src="{{imgSrc}}"/>

                  <h1>Rightway</h1>                                                                  7
                  <img ng-src="{{imgSrc}}"/>

                  angular.module('myApp', [])
                  .run(function($rootScope, $timeout) {                                              8
                      $timeout(function() {
                          $rootScope.imgSrc = 'https://www.google.com/images/srpr/logo11w.png';
                      }, 2000);                                                                      9
                  });
                  在线示例:http://jsbin.com/egucIqU/1/edit。
                                                                                                     10
                  浏览在线示例时,通过Chrome开发者工具的网络面板观察资源加载状况,注意,其中一个
              请求是红色的,说明发生了错误。这个错误是由于Wrong Way中我们用src代替了ng-src导致的。
                                                                                                     11

              9.2  在指令中使用子作用域
                                                                                                     12
                  下面将要介绍的指令会以父级作用域为原型生成子作用域。这种继承的机制可以创建一个隔
              离层,用来将需要协同工作的方法和数据模型对象放置在一起。                                                           13

                  ng-app和ng-controller是特殊的指令,因为它们会修改嵌套在它们内部的指令的作用域。
                                                                                                     14
                  ng-app为AngularJS应用创建$rootScope,ng-controller则会以$rootScope或另外一个
              ng-controller的作用域为原型创建新的子作用域。
                                                                                                     15
                  1. ng-app
                  任何具有ng-app属性的DOM元素将被标记为$rootScope的起始点。
                                                                                                     16
                  $rootScope是作用域链的起始点,任何嵌套在ng-app内的指令都会继承它。
                  在JavaScript代码中通过run方法来访问$rootScope。                                                17

                  <html ng-app="myApp">
                      <body>                                                                         18
                          {{ someProperty }}
   74   75   76   77   78   79   80   81   82   83   84