Question

每当我删除在指定了ng-click属性的元素之前的dom元素时，它将不再调用ng-click引用的函数。

这是一个不起作用的例子。注意：如果将if（true）更改为if（false）并单击“保存”，则将正确调用该函数。

function MainCtrl($scope) {
    $scope.submit = function() {
        alert('submitted');
    }
    
    function load() {
        if(true){
            $('#resetPassword').remove();    
        }
    }
    
    load();
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div ng-app>
    <div ng-controller="MainCtrl">
        <div class="btn-group m-b-20 pull-right" role="group">
            <button type="button" id="resetPassword" class="btn btn-success">Reset Password</button>
            <button type="button" class="btn btn-success" ng-click="submit();">Save</button>
        </div>
    </div>
</div>

Answer 1

我不知道为什么会这样，但你不应该使用jQuery。使用ng-if添加或删除条件上的按钮。这是Angular的发展方向。 jQuery＆＃39; s remove看起来很脏。 ng-show只显示或隐藏，但ng-if 添加或从DOM中删除元素。它是你想要的，也是迄今为止最简单的解决方案。

Answer 2

您应该尝试使用自定义指令完成此操作。 E.g：

<强> JS

app.directive("removeClick", function() {
      return {   
            link:function(scope,element,attrs)
            {
                element.bind("click",function() {
                    element.remove();
                });
            }
      }

});

<强> HTML

<div ng-app>
    <div ng-controller="MainCtrl">
        <div class="btn-group m-b-20 pull-right" role="group">
            <button type="button" id="resetPassword"class="btn btn-success">Reset Password</button>
            <button remove-click type="button" class="btn btn-success" ng-click="submit();">Save</button>
        </div>
    </div>
</div>

此时您可以自由使用getElementbyId，尽管您应该尝试将正确的元素传递给您的指令。这可能会让您对角度指令有基本的了解。

https://docs.angularjs.org/guide/directive

删除不同的dom元素后，ng-click不再调用函数

2 个答案: