我想动态地将ngClick添加到属性指令。不能将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>

从铬的检查员元件，我可以看到ng-click属性被添加到按钮。

我期望看到文本“myDirective被点击。”点击按钮时控制台中的，但实际上没有任何打印。没有错误发生。任何人都可以帮忙提前致谢。

来源

2016-06-14 Aetherus

可能会帮助你http://stackoverflow.com/questions/22116470/add-ng-click-dynamically-in-directive-link-function –

@SSH我已阅读此线程，但它只适用于元素指令，而不是用于属性指令。 – Aetherus

为什么不将事件绑定到指令？ –

你好，请试试这个，

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); 
       }); 
      } 
     }; 
});

来源

2016-06-14 03:45:08

所以没有纯粹的角度来解决这个问题，我不得不转向jQuery或jqlite，对吧？ – Aetherus

@Aetherus不，它不是你可以做到这一点，因为我已经写了它的代码，你可以在这里看到它http://jsfiddle.net/jigardafda/w9w65tk7/1/ –

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

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

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

来源

2016-06-14 03:51:19 MeanMan

这对我很有用！我的指令是使用控制器而不是链接器，所以我把代码放在那里，但它的工作原理是一样的。请注意，这不会为元素添加任何属性，因此您不一定会在DOM检查器中看到单击事件 – chiliNUT

不能将ngClick添加到属性指令

回答

HTML：

JS：

相关问题