наблюдать событие щелчка в директиве

Question

В оригинальной версии моего контроллера я добавил логотип заголовка к РОМ, а затем был в состоянии удалить и заменить его чем-то другим, когда функция была вызвана, как это

$scope.addHeader('.blahClassName'); 

    $scope.removeHeaderFunction = function(){ 
      $('.blahClassName).html(''); 
      //do other stuff 
    } 

Это работало отлично. Тем не менее, я прочитал, что лучше не делать манипуляции DOM в контроллере, поэтому я создал директиву, как этот

<div class='MyCtrl as vm'> 
<div header-dir myscope="vm" removeheaderflag="{{vm.headerflag}}"></div> 

Затем внутри функции связи моей директивы, добавить логотип заголовка и слушать изменения на флаге, чтобы удалить его, как этот

link: function(scope, elem, attrs){ 

     scope.myscope.addHeader('.blahClassName'); //calling the function addHeader on the controller available through myscope 

     attrs.$observe('removeheaderflag', function(){ 
      angular.element(elem[0].querySelector('.blahClassName')).html(''); 
     });   
    } 

Тогда в контроллере, я поставил $scope.headerflag = null; на странице загрузки, и установите его верно в removeHeaerFunction с намерением, что это устранило бы заголовок только когда флаг был установлено в true

$scope.removeHeaderFunction = function(){ 
    $scope.headerflag = true; 
    } 

Однако фактическое поведение моего кода заключается в том, что логотип добавляется и удаляется немедленно, независимо от того, для чего установлен $scope.headerflag. Другими словами, код внутри $attrs.observe('removeheaderflag', ... запускается немедленно.

Вопрос: как задержать ход кода в том, что наблюдатель или иным образом получить поведение, которое я пожелаю внутри директивы, то есть в основном, чтобы иметь возможность удалить что-то на событие щелчка

Answer 1

$observe делает работы такие же как и у $watch, единственное различие между этими двумя составляет $observe работает на выражение интерполяции {{}} и $watch работает над значением области как строкой.

В настоящее время то, что происходит ваша $observe функция вызывается, когда ваша переменная removeheaderflag от undefined к null так что в этом случае функция $observe обратного вызова вызывался и ваш blahClassName класс его удалят из DOM. Для ограничения этого поведения, вы должны добавить условие для вызова нужного кода, когда removeheaderflag изменил значение true

Код

attrs.$observe('removeheaderflag', function(newVal, oldValue){ 
    if(newVal) //this will check values in not null & not false 
    angular.element(elem[0].querySelector('.blahClassName')).html(''); 
}); 

Answer 2

Вы можете просто проверить возвращаемое значение в вашем $observe для значения вы в, желающего этот случай, true? Обратите внимание на следующие изменения ...

attrs.$observe('removeheaderflag', function(value) { // -- we know this 
    if(value) { 
     angular.element(elem[0].querySelector('.blahClassName')).html(''); 
    } 
}); 

Кроме того, на обсуждение в комментариях, вы можете быть в состоянии принять альтернативные подходы для этого. Поскольку ваши манипуляции с DOM просты (в этом примере), использование ngClass и разрешение CSS для этого для нас может оказаться жизнеспособным решением. Почему бы не связать headerflag с классом с правилом display: none? Пример может включать в себя ... (например, пример того, что касается разметки) ...

<header class="blahClassName" ng-class="{'remove': headerflag}">header</header> 

---

.remove { 
    display: none; 
} 

---

$scope.remove = function() { 
    $scope.headerflag = true; 
} 

JSFiddle Link - пример с ngClass

Другие подходы, такие как ngIf могут быть применимы и здесь. Возможно, вам не нужна специальная директива для этого.