{"action":"opened","issue":{"url":"https://api.github.com/repos/icewaters/icewaters.github.io/issues/56","labels_url":"https://api.github.com/repos/icewaters/icewaters.github.io/issues/56/labels{/name}","comments_url":"https://api.github.com/repos/icewaters/icewaters.github.io/issues/56/comments","events_url":"https://api.github.com/repos/icewaters/icewaters.github.io/issues/56/events","html_url":"https://github.com/icewaters/icewaters.github.io/issues/56","id":84490999,"number":56,"title":"AngularJS 指令实践指南","user":{"login":"icewaters","id":2446601,"avatar_url":"https://avatars.githubusercontent.com/u/2446601?v=3","gravatar_id":"","url":"https://api.github.com/users/icewaters","html_url":"https://github.com/icewaters","followers_url":"https://api.github.com/users/icewaters/followers","following_url":"https://api.github.com/users/icewaters/following{/other_user}","gists_url":"https://api.github.com/users/icewaters/gists{/gist_id}","starred_url":"https://api.github.com/users/icewaters/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/icewaters/subscriptions","organizations_url":"https://api.github.com/users/icewaters/orgs","repos_url":"https://api.github.com/users/icewaters/repos","events_url":"https://api.github.com/users/icewaters/events{/privacy}","received_events_url":"https://api.github.com/users/icewaters/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-06-03T10:49:12Z","updated_at":"2015-06-03T10:49:12Z","closed_at":null,"body":"中文参考:[ AngularJS 指令实践指南](http://blog.jobbole.com/62249/)\r\n英文出处: http://www.sitepoint.com/series/a-practical-guide-to-angularjs-directives/\r\n\r\n指令背后基本的想法很简单。它通过对元素绑定事件监听或者改变DOM而使HTML拥有真实的交互性。\r\n\r\n如果你想要符合HTML5的规范，你可以在元素前面添加 x- 或者 data-的前缀。所以下面的标记也会匹配 helloWorld 指令：\r\n```\r\n<div data-hello-world></div>\r\n//OR\r\n<div x-hello-world></div>\r\n```\r\n\r\n>\r\n注意： 在匹配指令的时候，Angular会在元素或者属性的名字中剔除 x- 或者 data- 前缀。 然后将 – 或者 : 连接的字符串转换成驼峰(camelCase)表现形式，然后再与注册过的指令进行匹配。这是为什么，我们在HTML中以 hello-world 的方式使用 helloWorld 指令。其实，这跟HTML对标签和属性不区分大小写有关。\r\n\r\n#### Link函数和Scope\r\n指令生成出的模板其实没有太多意义，除非它在特定的scope下编译。默认情况下，指令并不会创建新的子scope。更多的，它使用父scope。也就是说，如果指令存在于一个controller下，它就会使用这个controller的scope。 如何运用scope，我们要用到一个叫做 link 的函数。它由指令定义对象中的link属性配置。让我们来改变一下我们的 helloWorld 指令，当用户在一个输入框中输入一种颜色的名称时，Hello World 文字的背景色自动发生变化。同时，当用户在 Hello World 文字上点击时，背景色变回白色。 相应的HTML标记如下：\r\n\r\n```\r\n<body ng-controller=\"MainCtrl\">\r\n  <input type=\"text\" ng-model=\"color\" placeholder=\"Enter a color\" />\r\n  <hello-world/>\r\n</body>\r\n```\r\n修改后的 helloWorld 指令如下：\r\n```\r\napp.directive('helloWorld', function() {\r\n  return {\r\n    restrict: 'AE',\r\n    replace: true,\r\n    template: '<p style=\"background-color:{{color}}\">Hello World',\r\n    link: function(scope, elem, attrs) {\r\n      elem.bind('click', function() {\r\n        elem.css('background-color', 'white');\r\n        scope.$apply(function() {\r\n          scope.color = \"white\";\r\n        });\r\n      });\r\n      elem.bind('mouseover', function() {\r\n        elem.css('cursor', 'pointer');\r\n      });\r\n    }\r\n  };\r\n});\r\n```\r\n\r\n我们注意到指令定义中的 link 函数。 它有三个参数：\r\n\r\n- scope – 指令的scope。在我们的例子中，指令的scope就是父controller的scope。\r\n- elem – 指令的jQLite(jQuery的子集)包装DOM元素。如果你在引入AngularJS之前引入了jQuery，那么这个元素就是jQuery元素，而不是jQLite元素。由于这个元素已经被jQuery/jQLite包装了，所以我们就在进行DOM操作的时候就不需要再使用 $()来进行包装。\r\n- attr – 一个包含了指令所在元素的属性的标准化的参数对象。举个例子，你给一个HTML元素添加了一些属性：，那么可以在 link 函数中通过 attrs.someAttribute 来使用它。\r\n\r\nlink函数主要用来为DOM元素添加`事件监听`、`监视模型属性变化`、`以及更新DOM`。在上面的指令代码片段中，我们添加了两个事件， click，和 mouseover。click 处理函数用来重置 <p> 的背景色，而 mouseover 处理函数改变鼠标为 pointer。在模板中有一个表达式 {{color}}，当父scope中的 color 发生变化时，它用来改变 Hello World 文字的背景色。\r\n\r\n#### compile函数\r\ncompile 函数在 link 函数被执行之前用来做一些DOM改造。它接收下面的参数：\r\n- tElement – 指令所在的元素\r\n- attrs – 元素上赋予的参数的标准化列表\r\n\r\n要注意的是 compile 函数不能访问 scope，并且必须返回一个 link 函数。但是如果没有设置 compile 函数，你可以正常地配置 link 函数，（有了compile，就不能用link，link函数由compile返回）。compile函数可以写成如下的形式：\r\n\r\n```js\r\napp.directive('test', function() {\r\n  return {\r\n    compile: function(tElem,attrs) {\r\n      \r\n           //do optional DOM transformation here\r\n           // 在link函数之前做一些DOM处理\r\n          \r\n          //返回link函数\r\n           return function(scope,elem,attrs) {\r\n               //linking function here\r\n           };\r\n      }\r\n  };\r\n});\r\n```\r\n\r\n大多数的情况下，你只需要使用 link 函数。这是因为大部分的指令只需要考虑注册事件监听、监视模型、以及更新DOM等，这些都可以在 link 函数中完成。 但是对于像 ng-repeat 之类的指令，需要克隆和重复 DOM 元素多次，在 link 函数执行之前由 compile 函数来完成。这就带来了一个问题，为什么我们需要两个分开的函数来完成生成过程，为什么不能只使用一个？要回答好这个问题，我们需要理解指令在Angular中是如何被编译的！\r\n\r\n#### 指令是如何被编译的\r\n当应用引导启动的时候，Angular开始使用 $compile 服务遍历DOM元素。这个服务基于注册过的指令在标记文本中搜索指令。一旦所有的指令都被识别后，Angular执行他们的 compile 方法。如前面所讲的，compile 方法返回一个 link 函数，被添加到稍后执行的 link 函数列表中。这被称为编译阶段。如果一个指令需要被克隆很多次（比如 ng-repeat），compile函数只在编译阶段被执行一次，复制这些模板，但是link 函数会针对每个被复制的实例被执行。所以分开处理，让我们在性能上有一定的提高。这也说明了为什么在 compile 函数中不能访问到scope对象。 在编译阶段之后，就开始了链接（linking）阶段。在这个阶段，所有收集的 link 函数将被一一执行。指令创造出来的模板会在正确的scope下被解析和处理，然后返回具有事件响应的真实的DOM节点。\r\n\r\n#### 改变指令的Scope\r\n默认情况下，指令获取它父节点的controller的scope。但这并不适用于所有情况。如果将父controller的scope暴露给指令，那么他们可以随意地修改 scope 的属性。在某些情况下，你的指令希望能够添加一些仅限内部使用的属性和方法。如果我们在父的scope中添加，会污染父scope。 其实我们还有两种选择：\r\n\r\n- 一个子scope – 这个scope原型继承子父scope。\r\n- 一个隔离的scope – 一个孤立存在不继承自父scope的scope。\r\n\r\n这样的scope可以通过指令定义对象中 scope 属性来配置。下面的代码片段是一个例子：\r\n```js\r\napp.directive('helloWorld', function() {\r\n  return {\r\n    scope: true,    // use a child scope that inherits from parent\r\n    restrict: 'AE',\r\n    replace: 'true',\r\n    template: '<h3>Hello World!!</h3>'\r\n  };\r\n});\r\n```\r\n上面的代码，让Angular给指令创建一个继承自父socpe的新的子scope。 另外一个选择，隔离的scope：\r\n```js\r\napp.directive('helloWorld', function() {\r\n  return {\r\n    scope: {},  // use a new isolated scope\r\n    restrict: 'AE',\r\n    replace: 'true',\r\n    template: '<h3>Hello World!!</h3>'\r\n  };\r\n});\r\n```\r\n\r\n这个指令使用了一个隔离的scope。隔离的scope在我们想要创建可重用的指令的时候是非常有好处的。通过使用隔离的scope，我们能够保证我们的指令是自包含的，可以被很容易的插入到HTML应用中。 它内部不能访问父的scope，所保证了父scope不被污染。 在我们的 helloWorld 指令例子中，如果我们将 scope 设置成 {}，那么上面的代码将不会工作。 它会创建一个新的隔离的scope，那么相应的表达式 {{color}} 会指向到这个新的scope中，它的值将是 undefined. 使用隔离的scope并不意味着我们完全不能访问父scope的属性。其实有一些技术可以允许我们访问父scope的属性，甚至监视他们的变化。我们会在指令这个系列的第二部分中讨论这些技术，以及一些更高级的概念，比如 Controller 函数。 第二部分也会和你一起使用Angular指令创建一个较为丰富的记事本应用。 所以，请保持关注。\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n"}}