Page 91 - AngularJS权威教程

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

1
.red {
background-color: red;
}
2
angular.module('myApp',[])
.controller('LotteryController', function($scope) {
$scope.generateNumber = function() { 3
return Math.floor((Math.random()*10)+1);
};
});
4
在线示例：http://jsbin.com/IvEcUci/1/edit。
21. ng-attr-(suffix) 5

当AngularJS编译DOM时会查找花括号{{ some expression }}内的表达式。这些表达式会
被自动注册到$watch服务中并更新到$digest循环中，成为它的一部分： 6

<-- updated when`someExpression` on the$scope
is updated -->
<h1>Hello{{someExpression}}</h1> 7
有时浏览器会对属性会进行很苛刻的限制。SVG就是一个例子：
8
<svg>
<circle cx="{{ cx }}"></circle>
</svg>
9
运行上面的代码会抛出一个错误，指出我们有一个非法属性。可以用ng-attr-cx来解决这
个问题。注意，cx位于这个名称的尾部。在这个属性中，通过用{{ }}来写表达式，达到前面提 10
到的目的。

<svg> 11
<circle ng-attr-cx="{{ cx }}"><circle>
</svg>

12

13

14

15

16

17

18