ng-click больше не вызывает функцию после удаления элемента dom.

Question

Всякий раз, когда я удаляю элемент dom, который предшествует элементу с указанным атрибутом ng-click, он больше не будет вызывать функцию, которую ссылаются на ссылки 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, чтобы добавить или удалить кнопку при условии. Это способ пойти с Угловым. jQuery's remove здесь выглядит грязным. ng-show просто показать или скрыть, но ng-ifдобавляет или удаляет элемент из DOM. Это то, что вы хотите, и, безусловно, самое простое решение.

Answer 2

Вы должны попытаться сделать это с пользовательской директивы. Например:

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