{"id":3511,"date":"2015-02-06T15:54:01","date_gmt":"2015-02-06T07:54:01","guid":{"rendered":"https:\/\/sdeno.com\/?p=3511"},"modified":"2015-02-06T15:54:01","modified_gmt":"2015-02-06T07:54:01","slug":"angularjs%e8%87%aa%e5%ae%9a%e4%b9%89%e6%8c%87%e4%bb%a4directive","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=3511","title":{"rendered":"AngularJS\u81ea\u5b9a\u4e49\u6307\u4ee4directive()"},"content":{"rendered":"<p>angular\u521b\u5efa\u81ea\u5b9a\u4e49\u6307\u4ee4\u4f7f\u7528directive()\u4f8b\u5982\uff1a<\/p>\n<pre>var app = angular.module('myapp',[]);\r\n  app.directive('helloWorld',function(){\r\n     return {\r\n       restrict: 'AE',  \/\/\u63a8\u8350\u4f7f\u7528A\r\n       replace: true,   \/\/template\u4f1a\u8986\u76d6\u6389\u81ea\u5b9a\u4e49\u6807\u7b7e\r\n       template: '&lt;h3&gt;Hello World!&lt;\/h3&gt;' \/\/\u81ea\u5b9a\u4e49\u6807\u7b7e\u8981\u663e\u793a\u7684\u5185\u5bb9\r\n     }\r\n});<\/pre>\n<p>\u521b\u5efa\u51fa\u6765\u7684\u4fbf\u7b7e\u63a8\u8350\u4f7f\u7528&lt;div hello-world&gt;&lt;\/div&gt;<\/p>\n<p>\u7b2c\u4e00\u4e2a\u53c2\u6570\u662f\u6307\u4ee4\u7684\u540d\u79f0<\/p>\n<p>\u7b2c\u4e8c\u4e2a\u53c2\u6570\u662f\u4e00\u4e2a\u8fd4\u56de\u6307\u4ee4\u5b9a\u4e49\u5bf9\u8c61\u7684\u51fd\u6570\u3002\u5982\u679c\u4f60\u7684\u6307\u4ee4\u5bf9\u989d\u5916\u7684\u5bf9\u8c61\/\u670d\u52a1(services)\u4f8b\u5982 $rootScope, $http \u6216\u8005 $compile \u6709\u4f9d\u8d56\uff0c\u5b83\u4eec\u4e5f\u53ef\u4ee5\u5728\u5176\u4e2d\u88ab\u6ce8\u5165\u3002<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #ff0000;\">link\u51fd\u6570\u548c\u4f5c\u7528\u57df<\/span><\/p>\n<p>link\u51fd\u6570\u662f\u8d1f\u8d23\u64cd\u4f5cDOM\u5143\u7d20\uff0c\u4f8b\u5982\uff1a<\/p>\n<pre class=\" language-javascript\" style=\"color: black;\"><code class=\" language-javascript\" style=\"color: black;\">app<span class=\"token punctuation\" style=\"color: #999999;\">.<\/span><span class=\"token function\">directive<span class=\"token punctuation\" style=\"color: #999999;\">(<\/span><\/span><span class=\"token string\" style=\"color: #669900;\">'helloWorld'<\/span><span class=\"token punctuation\" style=\"color: #999999;\">,<\/span><span class=\"token keyword\" style=\"color: #0077aa;\">function<\/span><span class=\"token punctuation\" style=\"color: #999999;\">(<\/span><span class=\"token punctuation\" style=\"color: #999999;\">)<\/span><span class=\"token punctuation\" style=\"color: #999999;\">{<\/span>\r\n    <span class=\"token keyword\" style=\"color: #0077aa;\">return<\/span> <span class=\"token punctuation\" style=\"color: #999999;\">{<\/span>\r\n        restrict<span class=\"token punctuation\" style=\"color: #999999;\">:<\/span> <span class=\"token string\" style=\"color: #669900;\">'AE'<\/span><span class=\"token punctuation\" style=\"color: #999999;\">,<\/span>   \r\n        replace<span class=\"token punctuation\" style=\"color: #999999;\">:<\/span> <span class=\"token boolean\" style=\"color: #990055;\">true<\/span><span class=\"token punctuation\" style=\"color: #999999;\">,<\/span>\r\n        template<span class=\"token punctuation\" style=\"color: #999999;\">:<\/span> <span class=\"token string\" style=\"color: #669900;\">'&lt;p&gt;&lt;\/p&gt;'<\/span><span class=\"token punctuation\" style=\"color: #999999;\">,<\/span>   \r\n        link<span class=\"token punctuation\" style=\"color: #999999;\">:<\/span> <span class=\"token keyword\" style=\"color: #0077aa;\">function<\/span><span class=\"token punctuation\" style=\"color: #999999;\">(<\/span>scope<span class=\"token punctuation\" style=\"color: #999999;\">,<\/span>elem<span class=\"token punctuation\" style=\"color: #999999;\">,<\/span>attr<span class=\"token punctuation\" style=\"color: #999999;\">)<\/span><span class=\"token punctuation\" style=\"color: #999999;\">{<\/span>\r\n            elem<span class=\"token punctuation\" style=\"color: #999999;\">.<\/span><span class=\"token function\">bind<span class=\"token punctuation\" style=\"color: #999999;\">(<\/span><\/span><span class=\"token string\" style=\"color: #669900;\">'click'<\/span><span class=\"token punctuation\" style=\"color: #999999;\">,<\/span><span class=\"token keyword\" style=\"color: #0077aa;\">function<\/span><span class=\"token punctuation\" style=\"color: #999999;\">(<\/span><span class=\"token punctuation\" style=\"color: #999999;\">)<\/span><span class=\"token punctuation\" style=\"color: #999999;\">{<\/span>\r\n                elem<span class=\"token punctuation\" style=\"color: #999999;\">.<\/span><span class=\"token function\">css<span class=\"token punctuation\" style=\"color: #999999;\">(<\/span><\/span><span class=\"token string\" style=\"color: #669900;\">'background-color'<\/span><span class=\"token punctuation\" style=\"color: #999999;\">,<\/span><span class=\"token string\" style=\"color: #669900;\">'white'<\/span><span class=\"token punctuation\" style=\"color: #999999;\">)<\/span><span class=\"token punctuation\" style=\"color: #999999;\">;<\/span>\r\n            scope<span class=\"token punctuation\" style=\"color: #999999;\">.<\/span>$<span class=\"token function\">apply<span class=\"token punctuation\" style=\"color: #999999;\">(<\/span><\/span><span class=\"token keyword\" style=\"color: #0077aa;\">function<\/span><span class=\"token punctuation\" style=\"color: #999999;\">(<\/span><span class=\"token punctuation\" style=\"color: #999999;\">)<\/span><span class=\"token punctuation\" style=\"color: #999999;\">{<\/span>\r\n                scope<span class=\"token punctuation\" style=\"color: #999999;\">.<\/span>color <span class=\"token operator\" style=\"color: #a67f59;\">=<\/span> <span class=\"token string\" style=\"color: #669900;\">\"white\"<\/span><span class=\"token punctuation\" style=\"color: #999999;\">;<\/span>\r\n            <span class=\"token punctuation\" style=\"color: #999999;\">}<\/span><span class=\"token punctuation\" style=\"color: #999999;\">)<\/span><span class=\"token punctuation\" style=\"color: #999999;\">;<\/span>\r\n            <span class=\"token punctuation\" style=\"color: #999999;\">}<\/span><span class=\"token punctuation\" style=\"color: #999999;\">)<\/span><span class=\"token punctuation\" style=\"color: #999999;\">;<\/span>\r\n            elem<span class=\"token punctuation\" style=\"color: #999999;\">.<\/span><span class=\"token function\">bind<span class=\"token punctuation\" style=\"color: #999999;\">(<\/span><\/span><span class=\"token string\" style=\"color: #669900;\">'mouseover'<\/span><span class=\"token punctuation\" style=\"color: #999999;\">,<\/span><span class=\"token keyword\" style=\"color: #0077aa;\">function<\/span><span class=\"token punctuation\" style=\"color: #999999;\">(<\/span><span class=\"token punctuation\" style=\"color: #999999;\">)<\/span><span class=\"token punctuation\" style=\"color: #999999;\">{<\/span>\r\n                elem<span class=\"token punctuation\" style=\"color: #999999;\">.<\/span><span class=\"token function\">css<span class=\"token punctuation\" style=\"color: #999999;\">(<\/span><\/span><span class=\"token string\" style=\"color: #669900;\">'cursor'<\/span><span class=\"token punctuation\" style=\"color: #999999;\">,<\/span><span class=\"token string\" style=\"color: #669900;\">'pointer'<\/span><span class=\"token punctuation\" style=\"color: #999999;\">)<\/span><span class=\"token punctuation\" style=\"color: #999999;\">;<\/span>\r\n            <span class=\"token punctuation\" style=\"color: #999999;\">}<\/span><span class=\"token punctuation\" style=\"color: #999999;\">)<\/span><span class=\"token punctuation\" style=\"color: #999999;\">;<\/span>\r\n        <span class=\"token punctuation\" style=\"color: #999999;\">}<\/span>\r\n    <span class=\"token punctuation\" style=\"color: #999999;\">}<\/span>\r\n<span class=\"token punctuation\" style=\"color: #999999;\">}<\/span><span class=\"token punctuation\" style=\"color: #999999;\">)<\/span><span class=\"token punctuation\" style=\"color: #999999;\">;<\/span>   <\/code><\/pre>\n<p style=\"color: #555555;\">\u6ce8\u610f\u5230link\u51fd\u6570\u88ab\u7528\u5728\u4e86\u6307\u4ee4\u4e2d\u3002\u5b83\u63a5\u6536\u4e09\u4e2a\u53c2\u6570\uff1a<\/p>\n<ul style=\"color: #555555;\">\n<li>scope &#8211; \u5b83\u4ee3\u8868\u6307\u4ee4\u88ab\u4f7f\u7528\u7684\u4f5c\u7528\u57df\u3002\u5728\u4e0a\u9762\u7684\u4f8b\u5b50\u4e2d\u5b83\u7b49\u540c\u4e8e\u7b26\u63a7\u5236\u5668\u7684\u4f5c\u7528\u57df\u3002<\/li>\n<li>elem &#8211; \u5b83\u4ee3\u8868\u7ed1\u5b9a\u6307\u4ee4\u7684\u5143\u7d20\u7684jQlite\uff08jQuery\u7684\u4e00\u4e2a\u81ea\u5df1\uff09\u5305\u88f9\u5143\u7d20\u3002\u5982\u679c\u4f60\u5728AngularJS\u88ab\u5305\u542b\u4e4b\u524d\u5c31\u5305\u62ec\u4e86jQuery\uff0c\u90a3\u4e48\u5b83\u5c06\u53d8\u6210jQuery\u5305\u88f9\u5143\u7d20\u3002\u7531\u4e8e\u8be5\u5143\u7d20\u5df2\u7ecf\u88abjQuery\/jQlite\u5305\u88f9\uff0c\u6211\u4eec\u6ca1\u6709\u5fc5\u8981\u5c06\u5b83\u5305\u542b\u5728$()\u4e2d\u6765\u8fdb\u884cDOM\u64cd\u4f5c\u3002<\/li>\n<li>attars &#8211; \u5b83\u4ee3\u8868\u7ed1\u5b9a\u6307\u4ee4\u7684\u5143\u7d20\u4e0a\u7684\u5c5e\u6027\u3002\u4f8b\u5982\uff0c\u5982\u679c\u4f60\u5728HTML\u5143\u7d20\u4e0a\u6709\u4e00\u4e9b\u6307\u4ee4\u5f62\u5f0f\u4e3a\uff1a&lt;hello-world some-attribute&gt;&lt;\/hello-world&gt;\uff0c\u4f60\u53ef\u4ee5\u5728link\u51fd\u6570\u5185\u7528attrs.someAttribute\u6765\u5f15\u7528\u8fd9\u4e9b\u5c5e\u6027\u3002<\/li>\n<\/ul>\n<p style=\"color: #555555;\">link\u51fd\u6570\u4e3b\u8981\u662f\u7528\u6765\u5bf9DOM\u5143\u7d20\u7ed1\u5b9a\u4e8b\u4ef6\u76d1\u542c\u5668\uff0c\u76d1\u89c6\u6a21\u578b\u5c5e\u6027\u53d8\u5316\uff0c\u5e76\u66f4\u65b0DOM\u3002\u5728\u524d\u9762\u7684\u6307\u4ee4\u4ee3\u7801\u4e2d\uff0c\u6211\u4eec\u7ed1\u5b9a\u4e86\u4e24\u4e2a\u76d1\u542c\u5668\uff0cclick\u548cmouseover\u3002click\u5904\u7406\u51fd\u6570\u91cd\u7f6e\u4e86<\/p>\n<p style=\"color: #555555;\">\u7684\u80cc\u666f\u989c\u8272\uff0c\u800cmouseover\u5904\u7406\u51fd\u6570\u5219\u5c06\u6e38\u6807\u6539\u53d8\u4e3apointer\u3002\u6a21\u677f\u4e2d\u62e5\u6709\u8868\u8fbe\u5f0f{{color}}\uff0c\u5b83\u5c06\u968f\u7740\u7236\u4f5c\u7528\u57df\u4e2d\u7684\u6a21\u578bcolor\u7684\u53d8\u5316\u800c\u53d8\u5316\uff0c\u4ece\u800c\u6539\u53d8\u4e86Hello World\u7684\u80cc\u666f\u8272\u3002<\/p>\n<p style=\"color: #555555;\"><span style=\"color: #ff0000;\">Compile\u51fd\u6570<\/span><\/p>\n<p>Compile\u51fd\u6570\u4e3b\u8981\u7528\u6765\u5728link\u51fd\u6570\u8fd0\u884c\u4e4b\u524d\u8fdb\u884c\u4e00\u4e9bDOM\u8f6c\u5316\u3002\u5b83\u63a5\u6536\u4e0b\u9762\u51e0\u4e2a\u53c2\u6570\uff1a<\/p>\n<ul>\n<li>tElement &#8211; \u6307\u4ee4\u7ed1\u5b9a\u7684\u5143\u7d20<\/li>\n<li>attrs &#8211; \u5143\u7d20\u4e0a\u58f0\u660e\u7684\u5c5e\u6027<\/li>\n<\/ul>\n<p>\u8fd9\u91cc\u8981\u6ce8\u610fcompile\u4e0d\u80fd\u591f\u8bbf\u95eescope\uff0c\u800c\u4e14\u5fc5\u987b\u8fd4\u56de\u4e00\u4e2alink\u51fd\u6570\u3002\u4f46\u662f\uff0c\u5982\u679c\u6ca1\u6709compile\u51fd\u6570\u4ee5\u4f9d\u7136\u53ef\u4ee5\u914d\u7f6elink\u51fd\u6570\u3002compile\u51fd\u6570\u53ef\u4ee5\u88ab\u5199\u6210\u4e0b\u9762\u7684\u6837\u5b50\uff1a<\/p>\n<pre class=\" language-javascript\" style=\"color: black;\"><code class=\" language-javascript\" style=\"color: black;\">app<span class=\"token punctuation\" style=\"color: #999999;\">.<\/span><span class=\"token function\">directive<span class=\"token punctuation\" style=\"color: #999999;\">(<\/span><\/span><span class=\"token string\" style=\"color: #669900;\">'test'<\/span><span class=\"token punctuation\" style=\"color: #999999;\">,<\/span><span class=\"token keyword\" style=\"color: #0077aa;\">function<\/span><span class=\"token punctuation\" style=\"color: #999999;\">(<\/span><span class=\"token punctuation\" style=\"color: #999999;\">)<\/span><span class=\"token punctuation\" style=\"color: #999999;\">{<\/span>\r\n    <span class=\"token keyword\" style=\"color: #0077aa;\">return<\/span> <span class=\"token punctuation\" style=\"color: #999999;\">{<\/span>\r\n        compile<span class=\"token punctuation\" style=\"color: #999999;\">:<\/span> <span class=\"token keyword\" style=\"color: #0077aa;\">function<\/span><span class=\"token punctuation\" style=\"color: #999999;\">(<\/span>tElem<span class=\"token punctuation\" style=\"color: #999999;\">,<\/span>attrs<span class=\"token punctuation\" style=\"color: #999999;\">)<\/span><span class=\"token punctuation\" style=\"color: #999999;\">{<\/span>\r\n           <span class=\"token comment\" style=\"color: #708090;\" spellcheck=\"true\"> \/\/\u5728\u8fd9\u91cc\u539f\u5219\u6027\u7684\u505a\u4e00\u4e9bDOM\u8f6c\u6362   \r\n<\/span>            <span class=\"token keyword\" style=\"color: #0077aa;\">return<\/span> <span class=\"token keyword\" style=\"color: #0077aa;\">function<\/span><span class=\"token punctuation\" style=\"color: #999999;\">(<\/span>scope<span class=\"token punctuation\" style=\"color: #999999;\">,<\/span>elem<span class=\"token punctuation\" style=\"color: #999999;\">,<\/span>attrs<span class=\"token punctuation\" style=\"color: #999999;\">)<\/span><span class=\"token punctuation\" style=\"color: #999999;\">{<\/span>\r\n            <span class=\"token comment\" style=\"color: #708090;\" spellcheck=\"true\"> \/\/\u8fd9\u91cc\u7f16\u5199link\u51fd\u6570\r\n<\/span>            <span class=\"token punctuation\" style=\"color: #999999;\">}<\/span>\r\n        <span class=\"token punctuation\" style=\"color: #999999;\">}<\/span>\r\n    <span class=\"token punctuation\" style=\"color: #999999;\">}<\/span>\r\n<span class=\"token punctuation\" style=\"color: #999999;\">}<\/span><span class=\"token punctuation\" style=\"color: #999999;\">)<\/span><span class=\"token punctuation\" style=\"color: #999999;\">;<\/span>   <\/code><\/pre>\n<p>\u4ec0\u4e48\u65f6\u5019\u4f7f\u7528compile?<\/p>\n<p><span style=\"color: #555555;\">\u5927\u591a\u6570\u65f6\u5019\uff0c\u4f60\u4ec5\u4ec5\u53ea\u9700\u8981\u7f16\u5199link\u51fd\u6570\u3002\u8fd9\u662f\u56e0\u4e3a\u5927\u90e8\u5206\u6307\u4ee4\u90fd\u53ea\u5173\u5fc3\u4e0e\u6ce8\u518c\u4e8b\u4ef6\u76d1\u542c\u5668\uff0c\u76d1\u89c6\u5668\uff0c\u66f4\u65b0DOM\u7b49\u7b49\uff0c\u5b83\u4eec\u5728link\u51fd\u6570\u4e2d\u5373\u53ef\u5b8c\u6210\u3002\u50cf\u662fng-repeat\u8fd9\u6837\u7684\u6307\u4ee4\uff0c\u9700\u8981\u591a\u6b21\u514b\u9686\u5e76\u91cd\u590dDOM\u5143\u7d20\uff0c\u5c31\u9700\u8981\u5728link\u51fd\u6570\u8fd0\u884c\u4e4b\u524d\u4f7f\u7528compile\u51fd\u6570\u3002\u4f60\u53ef\u80fd\u4f1a\u95ee\u5a01\u6151\u5462\u4e48\u8981\u5c06\u4e24\u4e2a\u51fd\u6570\u5206\u522b\u4f7f\u7528\u3002\u4e3a\u4ec0\u4e48\u6211\u4eec\u4e0d\u80fd\u53ea\u7f16\u5199\u4e00\u4e2a\u51fd\u6570\uff1f\u4e3a\u4e86\u56de\u7b54\u8fd9\u4e2a\u95ee\u9898\u6211\u4eec\u9700\u8981\u7406\u89e3Angular\u662f\u5982\u4f55\u7f16\u8bd1\u6307\u4ee4\u7684\uff01<\/span><\/p>\n<p>&nbsp;<\/p>\n<h1 style=\"font-weight: bold; color: #555555;\">\u6307\u4ee4\u662f\u5982\u4f55\u88ab\u7f16\u8bd1\u7684<\/h1>\n<p style=\"color: #555555;\">\u5f53\u5e94\u7528\u5728\u542f\u52a8\u65f6\uff0cAngular\u5f00\u59cb\u4f7f\u7528$compile\u670d\u52a1\u89e3\u6790DOM\u3002\u8fd9\u9879\u670d\u52a1\u4f1a\u5728\u6807\u8bb0\u4e2d\u5bfb\u627e\u6307\u4ee4\u7136\u540e\u5c06\u5b83\u4eec\u5404\u81ea\u5339\u914d\u5230\u6ce8\u518c\u7684\u9002\u9f84\u3002\u4e00\u65e6\u6240\u6709\u7684\u6307\u4ee4\u90fd\u5df2\u7ecf\u88ab\u8bc6\u522b\u5b8c\u6210\uff0cAngular\u5c31\u5f00\u59cb\u6267\u884c\u5b83\u4eec\u7684compile\u51fd\u6570\u3002\u6b63\u5982\u524d\u9762\u6240\u63d0\u5230\u7684\uff0ccompile\u51fd\u6570\u8fd4\u56de\u4e00\u4e2alink\u51fd\u6570\uff0c\u8be5\u51fd\u6570\u4f1a\u88ab\u6dfb\u52a0\u5230\u7a0d\u540e\u6267\u884c\u7684link\u51fd\u6570\u961f\u5217\u4e2d\u3002\u8fd9\u53eb\u505a\u7f16\u8bd1\u9636\u6bb5(compile phase)\u3002\u6ce8\u610f\u5230\u5373\u4f7f\u540c\u4e00\u4e2a\u6307\u4ee4\u6709\u51e0\u4e2a\u5b9e\u4f8b\u5b58\u5728\uff0ccompile\u51fd\u6570\u4e5f\u53ea\u4f1a\u8fd0\u884c\u4e00\u6b21\u3002<\/p>\n<p style=\"color: #555555;\">\u5728\u7f16\u8bd1\u9636\u6bb5\u4e4b\u540e\u5c31\u5230\u4e86\u94fe\u63a5\u9636\u6bb5(link phase)\uff0c\u8fd9\u65f6link\u51fd\u6570\u5c31\u4e00\u4e2a\u63a5\u4e00\u4e2a\u7684\u6267\u884c\u3002\u5728\u8fd9\u4e2a\u9636\u6bb5\u4e2d\u6a21\u677f\u88ab\u751f\u6210\uff0c\u6307\u4ee4\u88ab\u8fd0\u7528\u5230\u6b63\u786e\u7684\u4f5c\u7528\u57df\uff0cDOM\u5143\u7d20\u4e0a\u5f00\u59cb\u6709\u4e86\u4e8b\u4ef6\u76d1\u542c\u5668\u3002\u4e0d\u50cf\u662fcompile\u51fd\u6570\uff0clin\u51fd\u6570\u4f1a\u5bf9\u6bcf\u4e2a\u6307\u4ee4\u7684\u5b9e\u4f8b\u90fd\u6267\u884c\u4e00\u6b21\u3002<\/p>\n<h1 style=\"font-weight: bold;\">\u6539\u53d8\u6307\u4ee4\u7684\u4f5c\u7528\u57df<\/h1>\n<p>\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u6307\u4ee4\u5e94\u8be5\u8bbf\u95ee\u7236\u4f5c\u7528\u57df\u3002\u4f46\u662f\u6211\u4eec\u5e76\u4e0d\u50cf\u5bf9\u6240\u6709\u60c5\u51b5\u4e00\u6982\u800c\u8bba\u3002\u5982\u679c\u6211\u4eec\u5bf9\u6307\u4ee4\u66b4\u9732\u4e86\u7236\u63a7\u5236\u5668\u7684scope\uff0c\u90a3\u4e48\u6307\u4ee4\u5c31\u53ef\u4ee5\u81ea\u7531\u7684\u4fee\u6539scope\u5c5e\u6027\u3002\u5728\u4e00\u4e9b\u60c5\u51b5\u4e0b\u4f60\u7684\u6307\u4ee4\u53ef\u80fd\u60f3\u8981\u6dfb\u52a0\u4e00\u4e9b\u53ea\u6709\u5185\u90e8\u53ef\u4ee5\u4f7f\u7528\u7684\u5c5e\u6027\u548c\u51fd\u6570\u3002\u5982\u679c\u6211\u4eec\u90fd\u5728\u7236\u4f5c\u7528\u57df\u4e2d\u5b8c\u6210\uff0c\u53ef\u80fd\u4f1a\u6c61\u67d3\u4e86\u7236\u4f5c\u7528\u57df\u3002\u56e0\u6b64\uff0c\u6211\u4eec\u6709\u4e24\u79cd\u9009\u62e9\uff1a<\/p>\n<ul>\n<li>\u4e00\u4e2a\u5b50\u4f5c\u7528\u57df &#8211; \u8fd9\u4e2a\u4f5c\u7528\u57df\u4f1a\u539f\u578b\u7ee7\u627f\u7236\u4f5c\u7528\u57df\u3002<\/li>\n<li>\u4e00\u4e2a\u9694\u79bb\u7684\u4f5c\u7528\u57df &#8211; \u4e00\u4e2a\u5168\u65b0\u7684\u3001\u4e0d\u7ee7\u627f\u3001\u72ec\u7acb\u5b58\u5728\u7684\u4f5c\u7528\u57df\u3002<\/li>\n<\/ul>\n<p>\u4f5c\u7528\u57df\u53ef\u4ee5\u7531\u6307\u4ee4\u5b9a\u4e49\u5bf9\u8c61\u4e2d\u7684scope\u5c5e\u6027\u5b9a\u4e49\u3002\u4e0b\u9762\u7684\u4f8b\u5b50\u5c55\u793a\u4e86\u8fd9\u4e00\u70b9\uff1a<\/p>\n<pre class=\" language-javascript\" style=\"color: black;\"><code class=\" language-javascript\" style=\"color: black;\">app<span class=\"token punctuation\" style=\"color: #999999;\">.<\/span><span class=\"token function\">directive<span class=\"token punctuation\" style=\"color: #999999;\">(<\/span><\/span><span class=\"token string\" style=\"color: #669900;\">'helloWorld'<\/span><span class=\"token punctuation\" style=\"color: #999999;\">,<\/span><span class=\"token keyword\" style=\"color: #0077aa;\">function<\/span><span class=\"token punctuation\" style=\"color: #999999;\">(<\/span><span class=\"token punctuation\" style=\"color: #999999;\">)<\/span><span class=\"token punctuation\" style=\"color: #999999;\">{<\/span>\r\n    <span class=\"token keyword\" style=\"color: #0077aa;\">return<\/span> <span class=\"token punctuation\" style=\"color: #999999;\">{<\/span>\r\n        scope<span class=\"token punctuation\" style=\"color: #999999;\">:<\/span> <span class=\"token boolean\" style=\"color: #990055;\">true<\/span><span class=\"token punctuation\" style=\"color: #999999;\">,<\/span><span class=\"token comment\" style=\"color: #708090;\" spellcheck=\"true\"> \/\/\u4f7f\u7528\u4e00\u4e2a\u7ee7\u627f\u7236\u4f5c\u7528\u57df\u7684\u81ea\u4f5c\u7528\u57df   \r\n<\/span>        restrict<span class=\"token punctuation\" style=\"color: #999999;\">:<\/span> <span class=\"token string\" style=\"color: #669900;\">'AE'<\/span><span class=\"token punctuation\" style=\"color: #999999;\">,<\/span>\r\n        replace<span class=\"token punctuation\" style=\"color: #999999;\">:<\/span> <span class=\"token boolean\" style=\"color: #990055;\">true<\/span><span class=\"token punctuation\" style=\"color: #999999;\">,<\/span>\r\n        template<span class=\"token punctuation\" style=\"color: #999999;\">:<\/span> <span class=\"token string\" style=\"color: #669900;\">'&lt;h3&gt;Hello World!&lt;\/h3&gt;'<\/span>\r\n    <span class=\"token punctuation\" style=\"color: #999999;\">}<\/span>\r\n<span class=\"token punctuation\" style=\"color: #999999;\">}<\/span><span class=\"token punctuation\" style=\"color: #999999;\">)<\/span><span class=\"token punctuation\" style=\"color: #999999;\">;<\/span>   <\/code><\/pre>\n<p><span style=\"color: #555555;\">\u4e0a\u9762\u7684\u4ee3\u7801\u8981\u6c42Angular\u4e3a\u6307\u4ee4\u63d0\u4f9b\u4e00\u4e2a\u80fd\u591f\u539f\u578b\u7ee7\u627f\u7236\u4f5c\u7528\u57df\u7684\u5b50\u7ec4\u7528\u4e8e\u3002\u53e6\u4e00\u79cd\u60c5\u5f62\uff0c\u4e00\u4e2a\u9694\u79bb\u4f5c\u7528\u57df\uff0c\u4ee3\u7801\u5982\u4e0b\u6240\u793a\uff1a<\/span><\/p>\n<pre class=\" language-javascript\" style=\"color: black;\"><code class=\" language-javascript\" style=\"color: black;\">app<span class=\"token punctuation\" style=\"color: #999999;\">.<\/span><span class=\"token function\">directive<span class=\"token punctuation\" style=\"color: #999999;\">(<\/span><\/span><span class=\"token string\" style=\"color: #669900;\">'helloWorld'<\/span><span class=\"token punctuation\" style=\"color: #999999;\">,<\/span><span class=\"token keyword\" style=\"color: #0077aa;\">function<\/span><span class=\"token punctuation\" style=\"color: #999999;\">(<\/span><span class=\"token punctuation\" style=\"color: #999999;\">)<\/span><span class=\"token punctuation\" style=\"color: #999999;\">{<\/span>\r\n    <span class=\"token keyword\" style=\"color: #0077aa;\">return<\/span> <span class=\"token punctuation\" style=\"color: #999999;\">{<\/span>\r\n        scope<span class=\"token punctuation\" style=\"color: #999999;\">:<\/span> <span class=\"token punctuation\" style=\"color: #999999;\">{<\/span><span class=\"token punctuation\" style=\"color: #999999;\">}<\/span><span class=\"token punctuation\" style=\"color: #999999;\">,<\/span><span class=\"token comment\" style=\"color: #708090;\" spellcheck=\"true\"> \/\/\u4f7f\u7528\u4e00\u4e2a\u5168\u65b0\u7684\u9694\u79bb\u4f5c\u7528\u57df   \r\n<\/span>        restrict<span class=\"token punctuation\" style=\"color: #999999;\">:<\/span> <span class=\"token string\" style=\"color: #669900;\">'AE'<\/span><span class=\"token punctuation\" style=\"color: #999999;\">,<\/span>\r\n        replace<span class=\"token punctuation\" style=\"color: #999999;\">:<\/span> <span class=\"token boolean\" style=\"color: #990055;\">true<\/span><span class=\"token punctuation\" style=\"color: #999999;\">,<\/span>\r\n        template<span class=\"token punctuation\" style=\"color: #999999;\">:<\/span> <span class=\"token string\" style=\"color: #669900;\">'&lt;h3&gt;Hello World!&lt;\/h3&gt;'<\/span>\r\n    <span class=\"token punctuation\" style=\"color: #999999;\">}<\/span>\r\n<span class=\"token punctuation\" style=\"color: #999999;\">}<\/span><span class=\"token punctuation\" style=\"color: #999999;\">)<\/span><span class=\"token punctuation\" style=\"color: #999999;\">;<\/span><\/code><\/pre>\n<p style=\"color: #555555;\">\u4e0a\u9762\u7684\u6307\u4ee4\u4f7f\u7528\u4e00\u4e2a\u4e0d\u7ee7\u627f\u7236\u4f5c\u7528\u57df\u7684\u5168\u65b0\u9694\u79bb\u4f5c\u7528\u57df\u3002\u5f53\u4f60\u60f3\u8981\u521b\u5efa\u4e00\u4e2a\u53ef\u91cd\u7528\u7684\u7ec4\u4ef6\u65f6\u9694\u79bb\u4f5c\u7528\u57df\u662f\u4e00\u4e2a\u5f88\u597d\u7684\u9009\u62e9\u3002\u901a\u8fc7\u9694\u79bb\u4f5c\u7528\u57df\u6211\u4eec\u786e\u4fdd\u6307\u4ee4\u662f\u81ea\u5305\u542b\u7684\u5175\u53ef\u4ee5\u8f7b\u677e\u5730\u63d2\u5165\u5230\u4efb\u4f55HTML app\u4e2d\u3002\u8fd9\u79cd\u505a\u6cd5\u9632\u6b62\u4e86\u7236\u4f5c\u7528\u57df\u88ab\u6c61\u67d3\uff0c\u7531\u4e8e\u5b83\u4e0d\u53ef\u8bbf\u95ee\u7236\u4f5c\u7528\u57df\u3002\u5728\u6211\u4eec\u4fee\u6539\u540e\u7684helloWorld\u6307\u4ee4\u4e2d\u5982\u679c\u4f60\u5c06scope\u8bbe\u7f6e\u4e3a{}\uff0c\u90a3\u4e48\u4ee3\u7801\u5c31\u4e0d\u4f1a\u518d\u6b63\u5e38\u8fd0\u884c\u3002\u5b83\u5c06\u521b\u5efa\u4e00\u4e2a\u9694\u79bb\u7684\u4f5c\u7528\u57df\u7136\u540e\u8868\u8fbe\u5f0f{{color}}\u5c06\u65e0\u6cd5\u5f15\u7528\u9694\u79bb\u4f5c\u7528\u57df\u4e2d\u7684\u5c5e\u6027\u56e0\u6b64\u503c\u53d8\u4e3aundefined\u3002<\/p>\n<p style=\"color: #555555;\">\u9694\u79bb\u4f5c\u7528\u57df\u5e76\u4e0d\u610f\u5473\u7740\u4f60\u4e00\u70b9\u90fd\u4e0d\u80fd\u83b7\u53d6\u5230\u7236\u4f5c\u7528\u57df\u4e2d\u7684\u5c5e\u6027\u3002\u6709\u4e00\u4e9b\u6280\u5de7\u53ef\u4ee5\u4f7f\u4f60\u8bbf\u95ee\u7236\u4f5c\u7528\u57df\u4e2d\u7684\u5c5e\u6027\u540c\u65f6\u76d1\u542c\u8fd9\u4e9b\u5c5e\u6027\u7684\u53d8\u5316\u3002\u6211\u4eec\u5c06\u5728\u4e0b\u4e00\u7bc7\u6587\u7ae0\u4e2d\u63d0\u5230\u8fd9\u79cd\u9ad8\u7ea7\u6280\u5de7\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>angular\u521b\u5efa\u81ea\u5b9a\u4e49\u6307\u4ee4\u4f7f\u7528directive()\u4f8b\u5982\uff1a var app = angular.module [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31,11],"tags":[],"class_list":["post-3511","post","type-post","status-publish","format-standard","hentry","category-angularjs","category-11"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/3511","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3511"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/3511\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3511"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3511"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}