AngularJS Direcitve-链接功能不会触发

Oleg Belousov 发表于 Dev

奥列格·别洛索夫（Oleg Belousov）

我想要实现的目标：将cordova本机处理程序包装在angular指令中

我想使用指令包装器为Cordova的本地事件实现处理程序（以侦听主体加载事件）。

我有以下指令样板：

angular.module('vitaApp')
  .directive('cordovaNative', function () {
    return {
      restrict: 'A',
      compile: function (element, attrs, transcludeFn) {
          alert('compile fired');
         element.bind('load', function(){
              alert('load occured');
          });
      },
      link: function postLink(scope, element, attrs) {
          alert('link fired');
          element.bind('load', function(){
              alert('load occured');
          });
      }
    };
  });

通过以下方式实例化：

<body ng-app="vitaApp"  ng-controller="metaCtrl" ng-swipe-right="showMenu()"  ng-swipe-left="hideMenu()" cordova-native>

cordovaNative指令的编译功能会触发，但链接功能不会触发。

它可能与ng-swipe指令有关（例如'{terminal：true}'）吗？

注：我不尝试使用compile并link在一起，我想证明，非他们的作品申请使用的目的，load单独的事件。

尚德马尼

指令中不能同时具有编译和链接功能。如果使用compile，则应返回一个函数，该函数本身就是一个链接函数。因此，上面的代码变为：

 compile: function (elem, attrs, transcludeFn) {
          alert('compile fired');
          return function(scope, element, attrs) {
             alert('link fired');
             element.on('load', function(){
                alert('load occured');
             });
          }
      },

更新：由于指令链接功能在元素加载后运行（大多数情况下），因此element load可能不需要在指令链接功能内添加事件处理程序。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。