Angular JS开发指南--（三）

最新推荐文章于 2014-08-13 23:28:55 发布

SnowUnicorn

最新推荐文章于 2014-08-13 23:28:55 发布

阅读量811

点赞数

分类专栏： AngulaJS 文章标签： angular js angularjs 对象 function

本文链接：https://blog.csdn.net/shixihaoma/article/details/32193723

版权

AngulaJS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

AngulaJS命名空间：为方式意外的明明冲突，AngulaJS为可能冲突的命名对象名加以前缀“$”，所以不要在自己的代码里用"$"做前缀，以免和AngulaJS代码发生冲突。

指令：

1、从HTML中调用指令。

指令遵循驼峰式命名，如ngbind。指令可以通过使用指定符号转化成链式风格的命名来调用，特定符号包括":"、"-"、"-"。指令可以作为元素名、属性名、类名或者注释。指令可以通过很多种不同的方式调用，但最终结果都是等效的。如下面所示：

<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.1.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="Ctrl1">
Hello <input ng-model='name'> <hr/>
<span ng:bind="name"> <span ng:bind="name"></span> <br/>
<span ng_bind="name"> <span ng_bind="name"></span> <br/>
<span ng-bind="name"> <span ng-bind="name"></span> <br/>
<span data-ng-bind="name"> <span data-ng-bind="name"></span> <br/>
<span x-ng-bind="name"> <span x-ng-bind="name"></span> <br/>
</div>
</body>
</html>

script.js

function Ctrl1($scope) {
$scope.name = 'angular';
}

2、字符替换式

在编译期间，编译器会用$interpolate服务去检查文本中是否嵌入了表达恨死。这个表达式会被当成一个监视器一样注册，并且在作为$digest循环中的一部分，会自动更新。如下例子：

<span style="white-space:pre">		</span><img src="img/{{username}}.jpg">Hello {{username}}!</img>

Factory method工厂函数：是用来创建指令的。它只会被调用一次，就是当编译器第一次匹配到相应指令的时候。你可以在其中进行任何初始化的工作。调用它的时候使用的是$injector.invoke，所以它遵循所有注入器的规则。

Directive Definition Object指令定义对象：它给编译器提供了生成指令需要的细节。这个对象的属性有：

1）名称name--当前作用域的名称，在注册时可选的。

2）优先级priority--当一个DOM上有多个指令时，有时需要指定指令执行的顺序。这个优先级就是用来在执行指令的compile函数前先排序的。高优先级的先执行。相同优先级的指令顺序没有被指定谁先执行。

3）终端terminal--如果被设置为TRUE，那么该指令就会在同一个DOM的指令集中最后被执行。任何其他的“terminal”的指令也仍然会执行，因为同级的指令顺序是没有被定义的。

4）作用域scope--如果被定义成：

a)那么就会为当前指令创建一个新的作用域。如果有多个在同一个DOM上的指令要求创建新作用域，那么只有一个新的会被创建。这一创建新作用域的规则不适合于模板的根节点。因为模板的根节点总会得到一个新的作用域。

b){}对象哈希。那么一个新的“孤立的”作用域就会被创建。这个“孤立的”作用域区别于一般作用域的地方在于，它不会以原型集成的方式直接继承自父作用域。这个“孤立的”作用域使用一个对象哈希来表示，这个哈希定义了一系列本地作用域属性，这些作用域属性是从父作用域中衍生出来的。这些属性主要用来分析模板的值。这个哈希的键值对是本地属性为键，它的来源为值。

@或@attr--将本地作用域成员或者DOM属性绑定。绑定结果总是一个字符串。因为DOM的属性就是字符串。如果DOM属性的名字没有被指定，那么就和本地属性名一样，比如说<widget my-attr="hello {{name}}">和作用域对象：{localName:'@myAttr'}.当name值改变的时候，作用域中的LocalName也会改变。这个name是从父作用域总读来的（而不是组件作用域）。

=或=expression（表达式）--在本地作用域属性和父作用域属性间建立一个双向的绑定。如果没有指定父作用域属性名称，那就和本地名称一样。比如<widget my-attr="parentModel">合作用域对象{localModel:'=myAttr'}，本地属性localModel会反映到父作用域parentModel的值。localModel和parentModel的任一方改变都会影响对方。

&或&attr--提供了一中能在父作用域下执行表达式的方法。如果没有指定父作用域属性名称，那么就和本地名称一样。比如<widget my-attr="count = count + value">和作用域对象{lcoalFn:'increment()'}。本地作用域成员localFn会指向一个increment表达式的函数包装。通常可以通过这个表达式从本地作用于给父作用域传值，操作方式是将本地变量名和值的对应关系传给这个表达式的包装函数。比如说，这个表达式是increment(amount)，那么就可调用localFn({amount:22})的方式制定amount的值。

控制器controller--控制器的构造对象。这个控制器函数实在预编译阶段被执行的，并且它是共享的，其他指令可以通过它的名字得到（参考依赖属性【require attribute】）。这就使得指令件可以互相交流来扩大自己的能力。会传递给这个函数的参数有：

1）$scope--当前元素关联的作用域。

2）$element--当前元素

3）$attr--当前元素的属性对象

4）$transclude--模板链接功能前绑定到正确的模板作用域：function(cloneLinkingFn)。

请求require--请求将另一个控制器作为参数传入到当前链接函数。这个请求需要传递被请求指令的控制器的名字。如果没有找到，就会触发一个错误。请求的名字可以加上下面两个前缀：

1）？--不要触发错误，这只是一个可选的请求。

2）^ --没找到的话，在父元素的controller里面也查找有没有。

限制restrict---EACM中的任意一个字母，它是用来限制指令的声明格式的。如果没有这一项，那就只允许使用属性形式的指令。

1）E --元素名称：<my-directive></my-directive>

2）A--属性：<div my-directive = "exp"></div>

3）C--类名：<div class = "my-directive : exp;"></div>

4）M--注释：

模板template ---将当前元素替换掉。这个替换过程会自动将元素的属性和CSS类名添加到新元素上。模板templateUrl-和template属性一样，只不过这里只是的是一个模板的URL，因为模板加载是异步的，所有编译和链接都会等到加载完成后再执行。

替换replace--如果被设置成TRUE那么现在的元素会被模板替换，而不是被插入到元素中。

编译模板transclude--将元素编译好，使得指令可以开始使用它。一般情况下需要和ngTransclude指令一起使用。使用嵌入的好处在于链接可以获取预绑定在作用域上的函数。在一个典型的初始化过程中，widget会创建一个孤立的作用域，但是嵌入并不是其中一个子成员，而是这鼓励作用域的兄弟成员。这使得widget可以有一个私有的状态，并且嵌入被绑定的父作用域上。

1）TRUE --嵌入指令的内容

2）‘element’ --嵌入整个元素，包括优先级较低的指令。

编译compile --这就是后面要讲到的编译函数；

链接link--只有没有提供编译函数时才会用到这个值。