HTML：

Question

我想动态地将ngClick添加到属性指令。

的javascript

angular.module('app')
  .directive('myDirective', ['$log', function ($log) {
    return {
      restrict: 'A',  // PAY ATTENTION TO THIS LINE
      compile: function (tElement) {
        tElement.attr('ng-click', 'onClick()');
        return function postLink(scope) {
          scope.onClick = function () {
            $log.debug('myDirective is clicked');
          }
        }
      }
    }
  }]);

标记

<button my-directive>Click Me</button>

在Chrome的元素检查器中，我可以看到ng-click属性已添加到按钮中。

我希望在单击按钮时在控制台中看到文本“myDirective被点击。”，但实际上没有打印任何内容。没有错误提出。有人可以帮忙吗？提前谢谢。

Answer 1

而不是使用链接内部编译直接使用链接功能，如下所示

link: function(scope, element, attrs) {
element.onClick(function(){
      $log.debug('myDirective is clicked');
});
}

您可以直接将click处理程序添加到元素中，您无需在指令中绑定ng-click指令。

Answer 2

您好，请试试这个，

HTML：

<div ng-app="angularApp">
    <div ng-controller="dirCtrl1">
        <button ng-click="clickFun('clicked')">Button</button>
        <button my-directive="directive">With directive</button>
    </div>
 </div>

JS：

.controller('dirCtrl1', function ($scope) {
    $scope.clickFun = function (msg) {
        console.log(msg);
    };
})
.directive('myDirective', function(){
      return{
           restrict: 'A',
           link: function(scope, ele, attr){
                var eventName = attr.evetName || 'click';
                var mas = attr.myDirective || 'just console';
                ele.on(eventName, function(){
                   console.log(mas); 
                });
           }
      };
});

无法添加ngClick到属性指令

2 个答案:

HTML：

JS：