Javascript 观察指令中的单击事件

在我的控制器的原始版本中，我在dom中添加了一个标题徽标，然后在调用函数时可以将其删除并替换为其他内容，如下所示

    $scope.addHeader('.blahClassName');

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

<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('');
       });         
  }

这很有效。然而，我读到最好不要在控制器中进行DOM操作，因此我创建了这样一个指令

    $scope.addHeader('.blahClassName');

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

<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，目的是仅当标志设置为true时才会删除标题

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

但是，我的代码的实际行为是，无论
$scope.headerflag
设置为什么，都会立即添加和删除徽标。换句话说，
$attrs.observe（'removeheaderflag'，…
中的代码会立即运行

问题：如何在该观察器中延迟代码的运行或以其他方式从指令中获得我想要的行为，即基本上能够在单击事件中删除某些内容
$observe
的工作原理与
$watch
的工作原理相同这两者之间的唯一区别是
$observe
在terpolation表达式
{}
和
$watch
将作用域值作为字符串处理

当前发生的情况是，当变量
从
未定义的
移除HeaderFlag
到
null
时，调用
$observe
函数，因此在这种情况下，调用
$observe
回调函数，并从DOM中删除
blahClassName
类ehavior当
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('');
});   

您是否可以检查
$observe
中返回的值以获得所需的值？在本例中，
true
？请注意以下更改

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

此外，根据评论中的讨论，您可能可以采取其他方法来实现这一点，利用并允许CSS为我们处理这一问题可能是一个可行的解决方案。为什么不将
headerflag
绑定到一个具有
display:none
规则的类？一个示例可以包括…（这里有点像是在编一个关于标记的示例）


-以ngClass为例

其他方法（如）可能也适用于此。也许您不需要自定义指令来完成此操作。
您使用的是标准单击事件还是ng单击？听起来您没有从角度生命周期内设置控制器值，因此更改不会立即反映出来。我比您领先16秒：p谢谢哦，你也是@salniro（我给了你们两个一票，但会接受PankajParker的回答，因为他是第一个）…您是否同意这种方法，即在控制器上设置状态，并在指令中侦听/观察状态的更改，然后执行dom操作？@salniro是的..我们添加了一个答案，这是非常小的差异..我们都发现了一个很好的操作问题：）由于打开了对话框，对相邻的答案进行了评论。看看这些建议是否有任何价值？@Leahcim I补充了一些可能有用的替代想法。请查看并让我知道您的想法。我以为我们在
$watch
中只能处理
新值
和
旧值
，其中
$observe
只能提供值谢谢。您同意在控制器上设置状态并侦听/观察指令中状态的更改以执行dom操作的这种方法吗？@Leahcim我更愿意在那里使用
ng class
。将根据模型更改添加类，如
ng class=“{'blahClassName'：headerflag}”但是我能听听类的变化和触发DOM事件吗？@ LeaHiCm，尽管我提供了类似的答案来修复这个问题，但是我也会考虑仅仅使用<代码>类=“NG隐藏”< /代码>和<代码> NG Stay=“ReaveHealError”< /代码>。除非您需要完全删除DOM节点
ng if
也可能是另一种方法