{"id":856,"date":"2016-09-21T21:49:11","date_gmt":"2016-09-21T13:49:11","guid":{"rendered":"http:\/\/www.xttblog.com\/?p=856"},"modified":"2016-09-22T21:16:59","modified_gmt":"2016-09-22T13:16:59","slug":"angularjs%e5%85%a5%e9%97%a8%e6%95%99%e7%a8%8b%e4%ba%94","status":"publish","type":"post","link":"https:\/\/www.xttblog.com\/?p=856","title":{"rendered":"AngularJS\u5165\u95e8\u6559\u7a0b(\u4e94)\u6307\u4ee4\u7684\u4f5c\u7528\u57df\u548c\u5185\u5d4c\u673a\u5236"},"content":{"rendered":"

\n\t\u4e0a\u4e00\u7bc7\u6211\u4eec\u5b66\u4e60\u4e86\u6307\u4ee4\u7684\u7b80\u4ecb\uff0c\u6307\u4ee4\u7684\u5c01\u88c5\uff0c\u6307\u4ee4\u7684\u7c7b\u578b\uff0c\u6307\u4ee4\u5c01\u88c5UI\u7b49\u3002\u4ecb\u4e8e\u6307\u4ee4\u592a\u8fc7\u5f3a\u5927\u4ee5\u53ca\u7bc7\u5e45\u7684\u539f\u56e0\uff0c\u672c\u7ae0\u6211\u5c06\u7ee7\u7eed\u5b66\u4e60\u6307\u4ee4\u7684\u4f5c\u7528\u57df\uff0c\u6307\u4ee4\u7684\u4ea4\u4e92\uff0c\u6307\u4ee4\u64cd\u4f5cDOM\u7b49\u77e5\u8bc6\u3002\n<\/p>\n

\n\t\u6307\u4ee4\u7684\u4f5c\u7528\u57df
\n<\/h2>\n

\n\t\u4e0a\u9762\u7684\u793a\u4f8b\u4e2d\uff0c\u6211\u4eec\u901a\u8fc7\u914d\u7f6e\u53ef\u4ee5\u5b9e\u73b0\u52a8\u6001\u52a0\u8f7dUI\u6a21\u677f\u6587\u4ef6\uff0c\u4f46\u662f\u6211\u4eec\u65e0\u6cd5\u52a8\u6001\u6307\u5b9aUI\u6a21\u677f\u6587\u4ef6\u4e2d\u663e\u793a\u7684\u5185\u5bb9\u3002\u8fd9\u4e00\u8282\u6211\u4eec\u6765\u4e86\u89e3\u4e00\u4e0b\u5982\u4f55\u901a\u8fc7\u6307\u4ee4\u7684\u9694\u79bb\u57df\u8fbe\u5230\u5728\u540c\u4e00\u4e2a\u6307\u4ee4\u4e2d\u52a8\u6001\u6307\u5b9aUI\u6a21\u677f\u6587\u4ef6\u4e2d\u8981\u663e\u793a\u7684\u5185\u5bb9\uff0c\u5148\u770b\u770b\u4ee3\u7801\u793a\u4f8b\uff1a\n<\/p>\n

\r\nvar mainModule = angular.module("mainModule", []);\r\nmainModule.controller("MyController", function() {\r\n  this.jason = { name: "Jason", job: "Developer" };\r\n  this.green = { name: "Green", job: "Doctor" };\r\n});\r\nmainModule.directive("myDirective", function() {\r\n  return {\r\n    restrict: "E",\r\n    scope: {\r\n      personInfo: "=person"\r\n    },\r\n    templateUrl: "myTemplate.html"\r\n  };\r\n});<\/pre>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <meta charset="utf-8">\r\n    <title>Demo for Directive<\/title>\r\n    <script src="..\/angular-1.5.8.js"><\/script>\r\n    <script src="modules.js"><\/script>\r\n  <\/head>\r\n  <body ng-app="mainModule">\r\n    <div ng-controller="MyController as mc">\r\n      <my-directive person="mc.jason"><\/my-directive>\r\n      <hr>\r\n      <my-directive person="mc.green"><\/my-directive>\r\n    <\/div>\r\n  <\/body>\r\n<\/html><\/pre>\n
\r\n<!-- myTemplate.html -->\r\nName: {{personInfo.name}}, Job: {{personInfo.job}}<\/pre>\n
\n\t\u4ece\u793a\u4f8b\u4e2d\u53ef\u4ee5\u770b\u5230\uff0c\u6211\u4eec\u7ed9\u6307\u4ee4\u7684\u8fd4\u56de\u5bf9\u8c61\u53c8\u6dfb\u52a0\u4e86\u4e00\u4e2a\u5c5e\u6027scope\uff0c\u8fd9\u5c31\u662f\u6307\u4ee4\u7684\u4f5c\u7528\u57df\u5c5e\u6027\uff0cscope\u5c5e\u6027\u6709\u4e09\u79cd\u53ef\u8bbe\u7f6e\u7684\u503c\uff1a \n<\/p>\n
    \n
  • \n\t\tfalse\uff1a\u9ed8\u8ba4\u503c\uff0c\u8fd9\u8868\u793a\u6307\u4ee4\u5171\u4eab\u5b83\u7236\u8282\u70b9\u7684Controller\u7684\u4f5c\u7528\u57df\uff0c\u4e5f\u5c31\u662f\u53ef\u4ee5\u4f7f\u7528{{}}\u8bed\u6cd5\u76f4\u63a5\u8bbf\u95ee\u7236\u8282\u70b9Controller\u4f5c\u7528\u57df\u4e2d\u7684\u5c5e\u6027\u3002 \n\t<\/li>\n
  • \n\t\ttrue\uff1a\u521b\u5efa\u6307\u4ee4\u81ea\u5df1\u7684\u4f5c\u7528\u57df\uff0c\u4f46\u662f\u8be5\u4f5c\u7528\u57df\u7ee7\u627f\u7236\u8282\u70b9Controller\u7684\u4f5c\u7528\u57df\u3002 \n\t<\/li>\n
  • \n\t\t{}\uff1a\u7b2c\u4e09\u79cd\u662f\u8bbe\u7f6e\u4e00\u4e2a\u5bf9\u8c61\uff0c\u8868\u793a\u521b\u5efa\u4e86\u6307\u4ee4\u81ea\u5df1\u72ec\u7acb\u7684\u4f5c\u7528\u57df\uff0c\u4e0e\u7236\u8282\u70b9Controller\u7684\u4f5c\u7528\u662f\u5b8c\u5168\u9694\u79bb\u7684\u3002\n\t<\/li>\n<\/ul>\n
    \n\t\u5982\u679c\u6211\u4eec\u5e0c\u671b\u6307\u4ee4\u7684\u9694\u79bb\u4f5c\u7528\u57df\u548c\u7236\u8282\u70b9Controller\u7684\u4f5c\u7528\u57df\u4e4b\u95f4\u8fdb\u884c\u4ea4\u4e92\uff0c\u90a3\u4e48\u5c31\u9700\u8981\u5c06\u4e24\u8005\u8fdb\u884c\u7ed1\u5b9a\uff0c\u8fd9\u91cc\u6709\u4e09\u79cd\u7ed1\u5b9a\u65b9\u5f0f\uff1a \n<\/p>\n
      \n
    • \n\t\t\u4f7f\u7528@\u5b9e\u73b0\u5355\u5411\u6570\u636e\u7ed1\u5b9a\uff0c\u4f46\u662f\u53ea\u9650\u4e8e\u7ed1\u5b9aController\u4f5c\u7528\u57df\u4e2d\u503c\u4e3a\u5b57\u7b26\u4e32\u7684\u5c5e\u6027\uff0c\u56e0\u4e3a\u662f\u5355\u5411\u7ed1\u5b9a\uff0c\u6240\u4ee5\u7236\u8282\u70b9Controller\u4fee\u6539\u7ed1\u5b9a\u7684\u5c5e\u6027\u53ef\u5f71\u54cd\u5230\u6307\u4ee4\u4f5c\u7528\u57df\u4e2d\u5bf9\u5e94\u7684\u5c5e\u6027\uff0c\u53cd\u4e4b\u5219\u4e0d\u53ef\u4ee5\u3002\u5728HTML\u4e2d\u4f7f\u7528{{}}\u8bed\u6cd5\u53d6\u503c\uff0c\u6bd4\u5982person="{{nameStr}}"\u3002 \n\t<\/li>\n
    • \n\t\t\u4f7f\u7528=\u5b9e\u73b0\u53cc\u5411\u6570\u636e\u7ed1\u5b9a\uff0c\u5728\u7236\u8282\u70b9Controller\u4e2d\u4fee\u6539\u5c5e\u6027\u548c\u5728\u6307\u4ee4\u4e2d\u4fee\u6539\u5c5e\u6027\u53ef\u76f8\u4e92\u5f71\u54cd\u3002\u5728HTML\u4e2d\u76f4\u63a5\u4f7f\u7528\u5c5e\u6027\u540d\u79f0\uff0c\u6bd4\u5982person="jasonObj"\u3002 \n\t<\/li>\n
    • \n\t\t\u4f7f\u7528&\u5b9e\u73b0\u51fd\u6570\u7ed1\u5b9a\uff0c\u7528\u4e8e\u7ed1\u5b9aController\u4e2d\u503c\u4e3a\u51fd\u6570\u7684\u5c5e\u6027\uff0c\u5728HTML\u4e2d\u76f4\u63a5\u8c03\u7528\u51fd\u6570\uff0c\u6bd4\u5982action="click()"\u3002\n\t<\/li>\n<\/ul>\n
      \n\t\u4e0a\u9762\u7684\u793a\u4f8b\u4e2d\u6211\u4eec\u7ed9myDirective\u6307\u4ee4\u8bbe\u7f6e\u4e86\u9694\u79bb\u57df\u5e76\u6dfb\u52a0\u4e86\u540d\u4e3apersonInfo\u7684\u5c5e\u6027\uff0c\u5e76\u4e0e\u7236\u8282\u70b9\u7684MyController\u8fdb\u884c\u6570\u636e\u53cc\u5411\u7ed1\u5b9a\uff0c\u5728HTML\u4ee3\u7801\u4e2d\uff0c\u5c31\u53ef\u4ee5\u901a\u8fc7<my-directive>\u6307\u4ee4\u6807\u7b7e\u7684person\u5c5e\u6027\u4e0eMyController\u7684\u6570\u636e\u7ed1\u5b9a\u4e86\u3002\u53e6\u5916\uff0c\u5728\u8fdb\u884c\u7ed1\u5b9a\u65f6\u8fd8\u6709\u4e00\u79cd\u7b80\u5199\u7684\u65b9\u5f0f\uff1a\n<\/p>\n
      \r\n...\r\nscope: {\r\n  personInfo: "="\r\n  \/\/ personInfo: "@"\r\n  \/\/ personInfo: "&"\r\n},\r\n...<\/pre>\n
      \n\t\u7b49\u540c\u4e8e\uff1a\n<\/p>\n
      \r\n...\r\nscope: {\r\n  personInfo: "=personInfo"\r\n  \/\/ personInfo: "@personInfo"\r\n  \/\/ personInfo: "&personInfo"\r\n},\r\n...<\/pre>\n
      \n\t\u6307\u4ee4\u7684Controller
      \n<\/h2>\n
      \n\t\u5728\u6307\u4ee4\u4e2d\u4e5f\u53ef\u4ee5\u521b\u5efaController\uff0c\u548c\u5728Module\u4e2d\u521b\u5efaController\u5f88\u7c7b\u4f3c\uff0c\u65e2\u5b9a\u4e49\u51fd\u6570\uff0c\u5728\u53c2\u6570\u4e2d\u6ce8\u5165\u9700\u8981\u7684AngularJS\u670d\u52a1\u65e2\u53ef\uff1a\n<\/p>\n
      \r\nvar mainModule = angular.module("mainModule", []);\r\nmainModule.controller("MyController", function($scope) {\r\n  $scope.green = { name: "Green", job: "Doctor" };\r\n});\r\nmainModule.directive("myDirective", function() {\r\n  return {\r\n    restrict: "E",\r\n    scope: {\r\n      person: "="\r\n    },\r\n    controller: function($scope) {\r\n      $scope.jason = { name: "Jason", job: "Developer" };\r\n    },\r\n    templateUrl: "myTemplate.html"\r\n  };\r\n});<\/pre>\n
      \r\n<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <meta charset="utf-8">\r\n    <title>Demo for Directive<\/title>\r\n    <script src="..\/angular-1.5.8.js"><\/script>\r\n    <script src="modules.js"><\/script>\r\n  <\/head>\r\n  <body ng-app="mainModule">\r\n    <div ng-controller="MyController">\r\n      <my-directive person="green"><\/my-directive>\r\n    <\/div>\r\n  <\/body>\r\n<\/html><\/pre>\n
      \r\n<!-- myTemplate.html -->\r\nName: {{jason.name}}, Job: {{jason.job}}\r\nName: {{person.name}}, Job: {{person.job}}<\/pre>\n
      \n\t\u5728\u4e0a\u9762\u7684\u793a\u4f8b\u4e2d\uff0c\u6211\u4eec\u7ed9myDirective\u6307\u4ee4\u6dfb\u52a0\u4e86Controller\uff0c\u6709\u4e00\u70b9\u4e0d\u540c\u7684\u662f\u5728\u6dfb\u52a0Controller\u65f6\u4e0d\u80fd\u8bbe\u7f6e\u540d\u79f0\uff0c\u6307\u4ee4\u7684Controller\u540d\u79f0\u9ed8\u8ba4\u4e0e\u6307\u4ee4\u540d\u79f0\u4e00\u6837\uff0c\u5982\u679c\u9700\u8981\u53e6\u5916\u6307\u5b9a\u540d\u79f0\uff0c\u9700\u8981\u914d\u7f6econtrollerAs\u6307\u5b9aController\u7684\u540d\u79f0\uff1a\n<\/p>\n
      \r\n...\r\ncontroller: function($scope) {\r\n  $scope.jason = { name: "Jason", job: "Developer" };\r\n},\r\ncontrollerAs: "directiveController",\r\n...<\/pre>\n
      \n\t\u5728\u4e0a\u9762\u793a\u4f8b\u7684UI\u6a21\u677f\u6587\u4ef6\u4e2d\u53ef\u4ee5\u770b\u51fa\uff0c\u65e2\u53ef\u4ee5\u4f7f\u7528\u6307\u4ee4\u9694\u79bb\u57df\u4e2d\u4e0e\u7236\u8282\u70b9Controller\u7ed1\u5b9a\u7684\u5c5e\u6027\uff0c\u4e5f\u53ef\u4ee5\u4f7f\u7528\u5728\u6307\u4ee4\u81ea\u5df1\u7684Controller\u4e2d\u5b9a\u4e49\u5728\u9694\u79bb\u57df\u7684\u5c5e\u6027\u3002\n<\/p>\n
      \n\t\u6307\u4ee4\u4e4b\u95f4\u7684\u4ea4\u4e92\n<\/p>\n
        \n
      • \n\t\trequire: "controllerName"\uff1a\u53ea\u67e5\u627e\u6307\u4ee4\u81ea\u5df1\u7684Controller\u3002 \n\t<\/li>\n
      • \n\t\trequire: "^controllerName"\uff1a\u67e5\u627e\u6307\u4ee4\u81ea\u5df1\u7684Controller\u4ee5\u53ca\u7236\u6307\u4ee4\u7684Controller\u3002 \n\t<\/li>\n
      • \n\t\trequire: "^^controllerName"\uff1a\u53ea\u67e5\u627e\u7236\u6307\u4ee4\u7684Controller\u3002 \n\t<\/li>\n
      • \n\t\trequire: [“^controllerName1”, “^controllerName2”]\uff1a\u5f15\u7528\u591a\u4e2aController\u3002\n\t<\/li>\n<\/ul>\n
        \n\t\u5982\u679c\u6307\u4ee4\u67e5\u627e\u5230\u5f15\u7528\u7684Controller\u540e\u8be5\u5982\u4f55\u4f7f\u7528\u5462\uff0c\u8fd9\u5c31\u8981\u4f7f\u7528\u6307\u4ee4\u7684\u53e6\u4e00\u4e2a\u91cd\u8981\u7684\u5c5e\u6027link\u51fd\u6570\u4e86\u3002link\u51fd\u6570\u4e3b\u8981\u7528\u6765\u4e3aDOM\u5143\u7d20\u6dfb\u52a0\u4e8b\u4ef6\u76d1\u542c\u3001\u76d1\u89c6\u6a21\u578b\u5c5e\u6027\u53d8\u5316\u3001\u4ee5\u53ca\u66f4\u65b0DOM\uff0c\u8be5\u51fd\u6570\u5171\u6709\u4e94\u4e2a\u53c2\u6570\uff1a \n<\/p>\n
          \n
        • \n\t\tscope\uff1a\u6307\u4ee4\u7684\u4f5c\u7528\u57df\uff0c\u9ed8\u8ba4\u662f\u7236\u8282\u70b9Controller\u7684\u4f5c\u7528\u57df\uff0c\u5982\u679c\u6307\u4ee4\u6709\u521b\u5efa\u81ea\u5df1\u7684\u4f5c\u7528\u57df\uff0c\u90a3\u4e48\u5219\u6307\u6307\u4ee4\u81ea\u5df1\u7684\u4f5c\u7528\u57df\u3002 \n\t<\/li>\n
        • \n\t\telement\uff1a\u6307\u4ee4\u7684jQLite(jQuery\u7684\u5b50\u96c6)\u5305\u88c5\u7684DOM\u5143\u7d20\uff0c\u53ef\u4ee5\u901a\u8fc7\u8be5\u53c2\u6570\u64cd\u4f5c\u6307\u4ee4\u6240\u5728\u7684DOM\u5143\u7d20\u3002 \n\t<\/li>\n
        • \n\t\tattrs\uff1a\u6307\u4ee4\u6240\u5728DOM\u5143\u7d20\u7684\u5c5e\u6027\u5bf9\u8c61\uff0c\u901a\u8fc7.\u8bed\u6cd5\u53ef\u4ee5\u83b7\u53d6\u5230\u7ed9DOM\u5143\u7d20\u6dfb\u52a0\u7684\u5c5e\u6027\u3002 \n\t<\/li>\n
        • \n\t\tcontroller\uff1a\u6307\u4ee4\u901a\u8fc7require\u5c5e\u6027\u5f15\u7528\u7684Controller\u5b9e\u4f8b\u3002 \n\t<\/li>\n
        • \n\t\ttranscludeFn\uff1a\u5d4c\u5165\u51fd\u6570\n\t<\/li>\n<\/ul>\n
          \n\tlink\u51fd\u6570\u7684\u5176\u4ed6\u51e0\u4e2a\u53c2\u6570\u540e\u9762\u6587\u7ae0\u4e2d\u90fd\u4f1a\u8bb2\u5230\uff0c\u5f53\u6307\u4ee4\u627e\u5230\u901a\u8fc7require\u5c5e\u6027\u5f15\u7528\u7684Controller\u540e\uff0c\u6211\u4eec\u5c31\u53ef\u4ee5\u901a\u8fc7link\u51fd\u6570\u7684\u7b2c\u56db\u4e2a\u53c2\u6570\u8bbf\u95ee\u5f15\u7528\u7684Controller\u4e86\u3002\n<\/p>\n
          \n\t\u901a\u8fc7\u6307\u4ee4\u64cd\u4f5cDOM\u5143\u7d20\n<\/p>\n
          \n\t\u6211\u4eec\u4e86\u89e3\u4e86link\u51fd\u6570\u540e\u5c31\u53ef\u4ee5\u4f7f\u7528\u8be5\u51fd\u6570\u5b9e\u73b0\u5404\u79cd\u6709\u7528\u7684\u6307\u4ee4\u4e86\uff0c\u6bd4\u5982\u901a\u8fc7\u6307\u4ee4\u64cd\u4f5cDOM\u5143\u7d20\uff1a\n<\/p>\n
          \r\nvar mainModule = angular.module("mainModule", []);\r\nmainModule.directive("myDirective", function($interval) {\r\n  return {\r\n    restrict: "A",\r\n    link: function(scope, element, attrs) {\r\n      $interval(function() {\r\n        element.text(new Date());\r\n      }, 1000);\r\n    }\r\n  };\r\n});<\/pre>\n
          \r\n<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <meta charset="utf-8">\r\n    <title>Demo for Directive<\/title>\r\n    <script src="..\/angular-1.5.8.js"><\/script>\r\n    <script src="modules.js"><\/script>\r\n  <\/head>\r\n  <body ng-app="mainModule">\r\n    <div>\r\n      Current Date is: <span my-directive><\/span>\r\n    <\/div>\r\n  <\/body>\r\n<\/html><\/pre>\n
          \n\t\u4e0a\u9762\u7684\u793a\u4f8b\u4e2d\uff0c\u9996\u5148\u6211\u4eec\u9650\u5b9a\u4e86myDirective\u6307\u4ee4\u53ea\u80fd\u4ee5\u6807\u7b7e\u5c5e\u6027\u7684\u5f62\u5f0f\u4f7f\u7528\uff0c\u7136\u540e\u6ce8\u5165\u4e86AngularJS\u7684\u5185\u7f6e\u670d\u52a1$interval\uff0c\u901a\u8fc7link\u51fd\u6570\u7684\u7b2c\u4e8c\u4e2a\u53c2\u6570\u83b7\u53d6\u5230\u6307\u4ee4\u6240\u5728\u7684DOM\u5143\u7d20\uff0c\u7136\u540e\u5468\u671f\u6027\u66f4\u65b0DOM\u5143\u7d20\u663e\u793a\u7684\u5185\u5bb9\u3002
          \n\t\"Angular\u6307\u4ee4\u64cd\u4f5cDOM\"\n<\/p>\n
          \n\t\u6307\u4ee4\u7684\u5185\u5d4c\u673a\u5236
          \n<\/h2>\n
          \n\t\u5927\u5bb6\u90fd\u77e5\u9053HTML\u4e2d\u7684DOM\u5143\u7d20\u662f\u5177\u6709\u5c42\u7ea7\u5173\u7cfb\u7684\uff0c\u4e00\u822c\u60c5\u51b5\u4e0b\u6211\u4eec\u4f7f\u7528\u6307\u4ee4\u5c01\u88c5\u7684UI\u6a21\u677f\u9897\u7c92\u5ea6\u90fd\u4f1a\u6bd4\u8f83\u5c0f\uff0c\u6240\u4ee5\u5c31\u4f1a\u51fa\u73b0\u6307\u4ee4\u5d4c\u5957\u7684\u73b0\u8c61\uff0c\u8fd9\u51e0\u9700\u8981\u7528\u5230\u6307\u4ee4\u7684\u5185\u5d4c\u673a\u5236\u4e86\uff0c\u6307\u4ee4\u7684transclude\u5c5e\u6027\u9ed8\u8ba4\u4e3afalse\uff0c\u5982\u679c\u5c06\u5176\u8bbe\u7f6e\u4e3atrue\uff0c\u90a3\u4e48\u8be5\u6307\u4ee4\u5c31\u5f00\u542f\u4e86\u5185\u5d4c\u673a\u5236\uff0c\u4e5f\u5c31\u662f\u8bf4\u6307\u4ee4\u6807\u7b7e\u4e4b\u95f4\u7684\u5185\u5bb9\u53ef\u4ee5\u88ab\u6307\u5b9a\u5d4c\u5165UI\u6a21\u677f\u4e2d\u88abng-transclude\u5185\u7f6e\u6307\u4ee4\u6807\u8bb0\u8fc7\u7684DOM\u5143\u7d20\u4e2d\uff0c\u7ed3\u5408\u4e4b\u524d\u8bf4\u8fc7\u7684\u7236\u5b50\u6307\u4ee4\u4ea4\u4e92\u7684\u5185\u5bb9\u6765\u5b9e\u73b0\u4e00\u4e2a\u4f8b\u5b50\uff1a\n<\/p>\n
          \r\n\/\/ modules.js\r\nvar mainModule = angular.module("mainModule", []);\r\nmainModule.directive("myTabs", function() {\r\n  return {\r\n    restrict: "E",\r\n    transclude: true,\r\n    controller: function($scope) {\r\n      $scope.panes = [];\r\n      var panes = $scope.panes;\r\n      this.addPane = function(pane) {\r\n        if(panes.length == 0) {\r\n          $scope.select(pane);\r\n        };\r\n        panes.push(pane);\r\n      };\r\n      $scope.select = function(pane) {\r\n        angular.forEach(panes, function(pane) {\r\n          pane.selected = false;\r\n        });\r\n        pane.selected = true;\r\n      };\r\n    },\r\n    templateUrl: "myTabs.html"\r\n  };\r\n});\r\nmainModule.directive("myPane", function() {\r\n  return {\r\n    restrict: "E",\r\n    require: "^^myTabs",\r\n    scope: {\r\n      name: "@",\r\n      job: "@"\r\n    },\r\n    link: function(scope, element, attrs, controller) {\r\n      controller.addPane(scope);\r\n    },\r\n    templateUrl: "myPane.html"\r\n  };\r\n})<\/pre>\n
          \n\t\u5728\u4e0a\u9762\u7684\u793a\u4f8b\u4e2d\uff0c\u6211\u4eec\u521b\u5efa\u4e86\u4e24\u4e2a\u6307\u4ee4\uff0cmyTabs\u548cmyPane\uff0c\u5728myTabs\u6307\u4ee4\u4e2d\uff0c\u6211\u4eec\u9650\u5b9a\u5b83\u53ea\u80fd\u4ee5\u6807\u7b7e\u5f62\u5f0f\u4f7f\u7528\uff0c\u5f00\u542f\u4e86\u5185\u5d4c\u673a\u5236\uff0c\u5e76\u5b9a\u4e49\u4e86\u5b83\u81ea\u5df1\u7684Controller\uff0c\u5728Controller\u4e2d\u5b9a\u4e49\u4e86panes\u53d8\u91cf\u548caddPane(pane)\uff0cselect(pane)\u4e24\u4e2a\u65b9\u6cd5\uff0c\u65b9\u6cd5\u7684\u5177\u4f53\u5b9e\u73b0\u5185\u5bb9\u8fd9\u91cc\u5c31\u4e0d\u89e3\u91ca\u4e86\uff0c\u90fd\u5f88\u7b80\u5355\uff0c\u6700\u540e\u6307\u5b9a\u4e86UI\u6a21\u677f\u6587\u4ef6myTabs.html\u3002\n<\/p>\n
          \n\t\u5728myPane\u6307\u4ee4\u4e2d\u540c\u6837\u9650\u5b9a\u53ea\u80fd\u4ee5\u6807\u7b7e\u5f62\u5f0f\u4f7f\u7528\uff0c\u6307\u5b9a\u4e86\u8981\u5f15\u7528\u7684\u7236\u8282\u70b9\u7684Controller\u540d\u79f0\uff0c\u540e\u521b\u5efa\u4e86\u81ea\u5df1\u7684\u9694\u79bb\u57df\uff0c\u5b9a\u4e49\u4e86name\uff0cjob\u4e24\u4e2a\u5c5e\u6027\uff0c\u5e76\u8fdb\u884c\u4e86\u5b57\u7b26\u4e32\u7684\u5355\u5411\u7ed1\u5b9a\uff0c\u7136\u540e\u5b9a\u4e49\u4e86link\u51fd\u6570\uff0c\u901a\u8fc7\u7b2c\u56db\u4e2a\u53c2\u6570\u8bbf\u95ee\u5230\u4e86\u7236\u8282\u70b9\u7684myTabsController\uff0c\u5e76\u8c03\u7528addPane(pane)\u51fd\u6570\uff0c\u5c06\u81ea\u5df1\u7684\u9694\u79bb\u57df\u4f5c\u4e3a\u53c2\u6570\u4f20\u5165\uff0c\u6700\u540e\u6307\u5b9a\u4e86UI\u6a21\u677f\u6587\u4ef6myPane.html\u3002\n<\/p>\n
          \n\t\u518d\u6765\u770b\u770bindex.html\u548cmyTabs.html\uff0cmyPane.html\u8fd9\u4e24\u4e2a\u6a21\u677f\u6587\u4ef6\uff1a\n<\/p>\n
          \r\n<!--index.html-->\r\n<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <meta charset="utf-8">\r\n    <title>Demo for Directive<\/title>\r\n    <script src="..\/angular-1.5.8.js"><\/script>\r\n    <script src="modules.js"><\/script>\r\n  <\/head>\r\n  <body ng-app="mainModule">\r\n    <my-tabs>\r\n      <my-pane name="Jason" job="Developer"><\/my-pane>\r\n      <my-pane name="Green" job="Doctor"><\/my-pane>\r\n    <\/my-tabs>\r\n  <\/body>\r\n<\/html>\r\n\r\n<!--myTabs.html-->\r\n<div>\r\n  <ul>\r\n    <li ng-repeat="pane in panes">\r\n      <a href="" ng-click="select(pane)">{{pane.name}}<\/a>\r\n    <\/li>\r\n  <\/ul>\r\n  <div id="paneContainer" ng-transclude><\/div>\r\n<\/div>\r\n\r\n<!--myPane.html-->\r\n<div ng-show="selected">\r\n  I am {{name}}, my job is {{job}}!\r\n<\/div><\/pre>\n
          \n\t\u5728index.html\u4e2d\uff0cmyTabs\u6307\u4ee4\u5305\u542b\u4e24\u4e2amyPane\u6307\u4ee4\uff0c\u8fd9\u4e24\u4e2amyPane\u6307\u4ee4\u6240\u663e\u793a\u7684\u5185\u5bb9\u5c06\u5d4c\u5165\u5728myTabs.html\u4e2did\u4e3apaneContainer\u7684DIV\u4e2d\uff0c\u4e5f\u5c31\u662fmyPane.html\u4e2d\u7684\u5185\u5bb9\u4f1a\u88ab\u5d4c\u5165\u5728\u8fd9\u4e2aDIV\u91cc\u3002\n<\/p>\n
          \n\t\u4e0a\u9762\u8fd9\u4e09\u4e2a\u6587\u4ef6\u4e2d\u6709\u51e0\u4e2a\u70b9\u9700\u8981\u6ce8\u610f\uff1a\n<\/p>\n