无法将 ngClick 添加到属性指令

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 is clicked."，但实际上没有打印任何内容。不会引发错误。任何人都可以帮忙吗？提前致谢。

Answer 1

编译里面不用link直接使用link函数如下图

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

您可以直接将点击处理程序添加到元素，您不需要在指令中绑定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); 
                });
           }
      };
});