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

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 的 remove 在这里看起来很脏。 ng-show 只是显示或隐藏，但 ng-if 添加 或删除 从 DOM 中元素。这就是您想要的，也是迄今为止最简单的解决方案。