像添加AngularJS属性一样添加ng-click

Add ng-click like an attribute AngularJS

本文关键字：添加 一样 ng-click AngularJS 属性      更新时间：2023-09-26

我想知道是否可以将ng-click添加为属性?

假设我想添加ng-click如果我的<li>有一个类别someClass:

angular.element(root.querySelector('li.someClass').attr({'ng-click': 'someFunc()'});

当<li>有一个类anotherClass我想重置ng-click:

angular.element(root.querySelector('li.someClass').attr({'ng-click': ''});

但是没有成功。

我不能在我的HTML:

<li class="someClass" ng-click="someFunc()"> ... </li>
<li class="anotherClass"> ... </li>

因为我的HTML是由ng-repeat动态生成的，也有一个指令，使ng-hide混乱。

最好的解决方案是angular.element，但ng-click不是一个属性对吗?

(我可以在Visual Studio中调试代码，当我以<li ng-click="someFunc()">...</li>的方式添加ng-click时，我无法在VS中的Locals Window中找到它)

在handler函数中检查类名而不是reset ng-click

JS 

$scope.someFunc = function (e) {
    if(angular.element(e.target).hasClass("someClass")){
        //code goes here
    };
}
HTML 

<li class="someClass" ng-click="clickHandler($event)">Button</li>

你不能真正切换ng-click，因为它是一个angular指令，但你可以添加这样的条件:

<li ng-click="someVar === true ? callOnMe() : ''">CLICK ME</li>

演示小提琴:http://jsfiddle.net/gnrL6cLw/

注意:将$scope.someVar更改为true以看到警报

没有看到您的ng-repeat代码，很难说-但是，如果我正确理解您的目标，我认为您可以使用ng-switch与ng-switch-when来实现您想要的输出:

<ul ng-repeat="item in items" ng-switch="item.someCondition">
    <li ng-switch-when="true" class="someClass" ng-click="someFunc()">...</li>
    <li ng-switch-when="false" class="anotherClass">...</li>
</ul>

这样，它应该根据条件呈现您想要显示的列表项。当然，item.someCondition不一定是布尔值—您可以匹配字符串、int或任何其他类型。

相关文章：