从元素中动态取消绑定 ng-click：angularjs答案

【问题标题】：unbind ng-click dynamically from element : angularjs从元素中动态取消绑定 ng-click：angularjs
【发布时间】：2015-06-10 19:39:19
【问题描述】：

我有一个具有 ng-click 事件的元素，单击它会添加一个可以正常工作的 div。我想要的是在添加 div 后删除 ng-click 。

一种方法是使用 ng-if

  <div ng-click="addDiv()" ng-if="!divAdded" >                   
                        <span>i add a div</span> 
               </div>

 <div class="disabled" ng-if="divAdded" >                   
                        <span>i add a div</span> 
               </div>

为此，我必须为可以打开和关闭的单个元素添加多个 div。有没有办法像我们在 jquery 中那样动态地取消绑定点击事件？

任何帮助将不胜感激

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

你也可以这样做：

<div ng-click="divAdded || addDiv()" >                   
    <span>i add a div</span> 
</div>

如果divAdded 为真，这将阻止ng-click 调用addDiv()

【讨论】：

虽然这是可能的，但putting conditional statements into templates should be avoided
该答案没有解释原因，您的评论也没有。你能详细说明一下吗？
当然。 HTML 是一种标记语言，它应该描述布局并且（理想情况下）根本没有行为。 ng-click 用于将输入连接到控制器，控制器负责决定如何处理该按钮单击。决定如何处理该点击不是按钮（视图）的决定 - 这正是控制器存在的目的，因此控制器也是人们寻找类似代码的地方。我很确定这也是角度表达式至今不支持富有表现力的 if 构造的原因——因为它不应该被使用。

【解决方案2】：

将该逻辑放入controller，而不是view

控制器：

(function(){

function divAddController() {
    var self = this;

    self.divAdded = false;

    self.addDiv = function() {
        if(!divAdded) { 
            //Add div here
            self.divAdded = true;
        }
    }
}

angular.module("example")
.controller("divAddController", divAddController);

})();

查看：

<div ng-controller="divAddController as divAdder">
    <div ng-click="divAdder.addDiv()" ng-class="{disabled: divAdder.divAdded}">
        <span>i add a div</span>
    </div>
</div>

【讨论】：

【解决方案3】：

你可以用这样更简单的方法来做：

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope) {
  $scope.showDiv = false;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">
  <button ng-click="showDiv = true;">I show the div</button>
  <div ng-if="showDiv">I am visible!</div>
</div>

【讨论】：