Question

我做了一个使用element.html（）来设置html的指令。在html代码中，我希望能够在使用该指令的范围内调用函数。这样的事情：

app.directive('myDirective', ['$rootScope', function ($rootScope) {
    return {
        restrict: 'A',
        link: function(scope, element) {
          element.html('<button ng-click="doit()">Does not work</button>');
        }
    };
}]);

永远不会调用doit（）函数。

我做了一个plnkr来演示它：

http://plnkr.co/edit/nckqny1FNiJJjthmlSh8?p=preview

Answer 1

为什么不只是模板？

return {
    restrict: 'A',
    template:'<button ng-click="doit()">Do It</button>',
    link: function(scope, element, attrs) {

    }
};

Answer 2

当您动态添加HTML时，您必须使用$ compile服务手动编译和链接它：

app.directive('myDirective', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        link: function(scope, element) {
          var e = angular.element('<button ng-click="doit()">Works Now!!</button>');
          element.append(e);
          $compile(e)(scope);
        }
    };
}]);

Answer 3

另一种方法是：

return {
  restrict: 'A',
  template: '<button>Brings up alert</button><br><button>Does not work</button>',
  link:function(scope, element, attrs){
    element.on('click', function(e){
      if(e.target.nodeName.toLowerCase() == 'button'){
        scope.doit();
      }
    });
  }
};

而不是像在代码示例中那样绑定click事件，你可以像上面一样在链接函数中绑定事件，但是你需要这样做：

在返回指令时使用template:""选项。
链接功能中的绑定事件。
当前元素是div本身，但您必须在函数args中传递事件。
检查点击的目标是否为e.target.nodeName
e.target.nodeName会在upperCase中生成tagName，因此请使用上面的if条件。
如果点击的元素为button，请执行scope.doit();

从指令生成的html中调用范围函数？

3 个答案: