Page 69 - AngularJS权威教程

8.1 指令：自定义 HTML 元素和属性 49

3. 关于IE浏览器 1
①
如果你正在使用IE浏览器，打开这个在线示例 。会发现尽管指令声明了两次，但只出现了
一个链接。 2

从技术上讲，可以通过在文档头部声明新的标签（查看第30章）来解决这个问题，但这样做
的后果就是，当疏忽了一致性时会导致额外的问题。 3
因此，好的经验法则就是始终用属性来声明指令（就像我们之前做的那样），这样会给以后
带来方便。 4
值得注意的一个例外是，扩展内置HTML标签，例如用AngularJS重载<a>、 <form>和<input>。
这些场景不会导致浏览器的兼容性问题，因为它们本身就是浏览器所支持的标签。 5

4. 表达式
由于指令可以用属性的形式调用，我们可能会好奇如果给属性赋值会发生什么： 6

<h1 ng-init="greeting='HelloWorld'">
The greeting is: {{ greeting }} 7
</h1>
在线示例：http://jsbin.com/IdUYexO/2/edit。
8
我们将表达式greeting = 'Hello World'赋值给内置指令ng-init。在表达式中，我们将
greeting属性的值设置为Hello World，然后计算花括号内的{{ greeting }}这个表达式的值。 9

这两种情况都会在当前作用域中计算一个普通的JavaScript表达式。根据这个表达式放置的位
置不同，当前作用域可以是AngularJS在应用启动时调用ng-app实例化的$rootScope，也可以是 10
某个子作用域，比如某个控制器的作用域。
 用表达式来声明指令 11

我们知道声明指令时既可以使用表达式，也可以不使用表达式。下面回顾一下几种合法的表
达式声明： 12

<my-directive="someExpression">
</my-directive> 13
<div my-directive="someExpression">
</div>
<div class="my-directive:someExpression">
</div> 14
<!-- directive: my-directive someExpression -->
这里有一个值得注意的问题，赋值给指令的表达式会在哪个环境中运行？要回答这个问题， 15
首先要了解一个复杂但非常重要的概念，就是当前作用域，它由DOM周围嵌套的控制器提供。

 当前作用域介绍 16
首先快速了解一下由DOM通过内置指令ng-controller提供的作用域。这个指令的作用是在
DOM中创建一个新的子作用域： 17

<p>We can access: {{ rootProperty }}</p>
—————————— 18
① http://jsbin.com/IJAzUJE/1/edit