“指令属性”是绑定到DOM元素的函数，可以调用方法、定义行为、绑定控制器和$scope对象、操作DOM等等。

当浏览器启动并开始解析HTML时(像往常一样)，DOM元素上的指令属性将像其他属性一样被解析。

当一个Angular.js应用程序启动时，Angular编译器将遍历DOM树(从带有ng-app指令属性的DOM元素开始，正如我们在本系列的第一篇文章中提到的)，解析HTML，并找到这些指令属性函数。

当在DOM元素上找到一个或多个这样的指令属性函数时，它们被收集、排序，然后按优先级顺序执行。

每个指令属性都有自己的优先级，您可以在我们关于指令属性的专题文章(http://www . ng-newsletter.com/post/directions . html)中找到更深入的信息。

Angular.js应用程序的动态和响应性能归功于指令属性。我们以前见过一些指令属性的用例：

ng模型

enter-model=' name ' name=' name ' placeholder='输入您的姓名'/h4yourname3360 {{name}}/h4尝试一下。

ng-model指令属性(我们在上一章中使用过)用于将DOM文本输入框的值绑定到控制器中的$scope模型。具体的实现过程是将$watch函数绑定到这个值(类似于JavaScript中的事件监控函数)。

$watch函数(使用时)在Angular.js的事件循环(即$digest循环)中运行，这样Angular.js就可以相应地更新DOM。请关注我们关于$digest Loop的高级文章！

在Angular.js应用程序的开发中，我们使用指令属性将行为绑定到DOM。属性的使用是应用程序是否具有动态和响应能力的关键。Angular.js提供了许多默认的指令属性。现在让我们来看看其中的一些以及如何使用它们。

几种常见的命令属性：

{{expression}}

这个双括号指令属性使用$watch()函数为括号中的表达式注册一个侦听器。正是这个$watch函数使Angular.js能够实时自动更新视图。

那么，表达到底是什么呢？要理解指令属性的操作，首先要理解表达式，所以这里我们就绕道来看看本系列的第五部分，——表达式。我们在前面的示例中已经看到了表达式，例如{{ person.name }}和{{ clock }}。

{ { 8 1 } } 9 { { person } } { ' name ' : ' arilerner ' } { { 10 * 3.3 | currency } } $ 33.00在最后一个示例中使用了筛选器(10 * 3.3 | currency)。在本系列的后面，将深入介绍过滤器。

这个表达式看起来有点像eval(javascript)的结果。它们将由Angular.js处理，因此具有以下重要且独特的特性：

所有表达式都在作用域的上下文中执行，因此可以使用局部$作用域中的所有变量。如果表达式的执行导致类型错误或引用错误，则不会引发这些错误。表达式不允许任何控制函数流的函数(如if/else等条件语句)。表达式可以接受一个或多个串联的过滤器。尝试

尝试输入“人”、“时钟”或其他数学公式，如2 ^ 4。你甚至可以操作范围，比如试着输入person.name=" Ariperson.age=28人或钟。

表达式在调用它们的范围内运行，因此表达式可以访问和操作其范围内的所有内容。因此，您可以使用表达式遍历其作用域的属性(我们将在ng-repeat中看到这个应用程序)，调用作用域中的函数，或者对作用域中的变量执行数学运算。

现在，让我们回到命令属性.

ng-初始化

ng-init指令属性是一个在启动时(在程序进入运行阶段之前)运行的函数。它允许我们在程序运行前设置初始变量值：

B-init=' name=' arilerner ' '你好，{{name}}试试看。

你好，阿里勒纳朗

ng-click指令属性为DOM元素的点击事件注册一个监听器。当在DOM元素上发生点击事件时(也就是当按钮或链接被点击时)，Angular.js将执行表达式的内容并相应地更新视图。

Ng-click=' counter=counter1 '添加一个/按钮当前counter3360 {{counter}}试试看。

我们还可以使用ng-click来调用编写在控制器中并绑定到$scope的函数，例如：

button-click=' say hello()' say hello/button controller中的函数是：

app.controller('MyController '，function($ scope){ $ scope . sayHello=function(){ alert(' hello！');} });尝试

ng-显示/ng-隐藏

ng-show和ng-hide指令根据给它们的表达式值的真实性来显示和隐藏它们所属的DOM。

我们不会在这里深入讨论，但是您应该熟悉JavaScript中变量值的“真”和“假”的概念。

按钮ng-init=' should SHow=true ' ng-click=' should SHow=！shouldShow“翻转shouldShow变量/按钮”div ng-show=“should SHow”H3 SHow { { should SHow } }/H3/div ng-hide=“should SHow”h3Hiding { { should SHow } }/H3/div-repeat

ng-repeat指令遍历数据集中的每个数据元素，并加载一个HTML模板来呈现数据。重用的模板元素是我们绑定这个指令属性的DOM元素。模板呈现的每个DOM元素都有自己的作用域。

在解释更多之前，让我们看一个例子。假设我们的控制器中有这样一个数据元素数组：

$scope .舍友=[ { name: 'Ari'}，{ name: 'Q'}，{ name: 'Sean'}，{ name : ' Anand ' }]；鉴于此，我们可以使用ng-repeat遍历该集合中的数据：

Ul ng-repeat='房间中的人' {person。name}}/Li/ul稍微修改一下给ng-repeat的表达式，我们也可以用它来遍历一个由成对键值数据组成的集合。例如，假设我们有一组名称和它们最喜欢的颜色：

$ scope . people={ ' ari ' : ' orange '，' q' : '紫色'，' Sean' : '绿色' }要遍历它，我们可以将object:中的这个表达式： (key，value)赋予ng-repeat指令的属性。

ul li ng-repeat='(姓名、颜色)在people“{ name }”中，最喜欢的颜色是{{ color }} /li /ul