Question

我想要实现的目标：在角度指令中包装cordova本地处理程序

我想使用指令包装器为Cordova的本机事件实现处理程序（为了监听body load事件）。

我有以下指令样板：

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指令有关（例如＆＃39; {terminal：true}＆＃39;）？

注意：我并未尝试同时使用compile和link，我试图证明其中没有一个用于分别订阅load事件。< / p>

Answer 1

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

 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事件处理程序。

Answer 2

来自Angular Docs：

link

This property is used only if the compile property is not defined.

由于您定义了编译功能，因此不需要链接功能。有more information about it here.

Answer 3

如果未定义编译功能，则只应使用链接功能。因此，在您的情况下，因为定义了编译函数，您必须返回postLink函数或具有preLink和postLink函数的对象。

.directive('cordovaNative', function () {
  return {
    restrict: 'A',
    compile: function (elem, attrs, transcludeFn) {
      return {
          pre: function preLink() {
             alert('Pre link');
          },
          post: function postLink(scope, element, attrs) {
              alert('link fired');
              element.bind('load', function(){
                  alert('load occured');
              });
          }
      }
    }
  };
});

或者，如果您不需要preLink功能：

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

Here is a fiddle

AngularJS指令 - 链接功能不会触发

3 个答案: