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 }}