打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
anagularJs指令的controller,link,compile有什么不同

 

/directives.js增加exampleDirective  phonecatDirectives.directive('exampleDirective', function() {      return {          restrict: 'E',          template: '<p>Hello {{number}}!</p>',          controller: function($scope, $element){              $scope.number = $scope.number + "22222 ";          },          link: function(scope, el, attr) {              scope.number = scope.number + "33333 ";          },          compile: function(element, attributes) {              return {                  pre: function preLink(scope, element, attributes) {                      scope.number = scope.number + "44444 ";                  },                  post: function postLink(scope, element, attributes) {                      scope.number = scope.number + "55555 ";                  }              };          }      }  });    //controller.js添加  dtControllers.controller('directive2',['$scope',      function($scope) {          $scope.number = '1111 ';      }  ]);    //html  <body ng-app="phonecatApp">      <div ng-controller="directive2">          <example-directive></example-directive>      </div>  </body>  

运行结果:

 Hello 1111 22222 44444 55555 ! 

由结果可以看出来,controller先运行,compile后运行,link不运行。

将上例中的compile注释掉

//        compile: function(element, attributes) {  //            return {  //                pre: function preLink(scope, element, attributes) {  //                    scope.number = scope.number + "44444 ";  //                },  //                post: function postLink(scope, element, attributes) {  //                    scope.number = scope.number + "55555 ";  //                }  //            };  //        }  

运行结果:

Hello 1111 22222 33333 ! 

由结果可以看出来,controller先运行,link后运行,link和compile不兼容。

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
Adding the "rel" and "title" attributes to im...
Angular开发中的注意事项
StackOverFlow精彩问答赏析:有jQuery背景的开发者如何建立起AngularJS的思维模式?
jQuery和AngularJS的区别浅析
AngularJS 中的一些坑
AngularJS学习笔记
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服