javascript - 观察指令中的点击事件

Question

在我的 Controller 的原始版本中，我向 dom 添加了一个标题 Logo ，然后能够在调用函数时将其删除并替换为其他内容，如下所示

    $scope.addHeader('.blahClassName');

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

这很好用。但是，我读到最好不要在 Controller 中进行 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('');
       });         
  }

然后在 Controller 中，我在页面加载时设置 $scope.headerflag = null;，并在 removeHeaerFunction 中将其设置为 true，目的是删除仅当标志设置为 true 时标题

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

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

问题:如何在该观察者中延迟代码的运行或以其他方式从指令中获得我想要的行为，即基本上能够在点击事件中删除某些内容

Answer 1

$observe 与 $watch 的工作方式相同，两者之间的唯一区别是 $observe 工作于插值表达式 {{}} 和 $watch 以字符串形式处理范围值。

当前发生的事情是当你的变量 removeheaderflag 从 undefined 到 null 时你的 $observe 函数被调用所以在这种情况下，将调用 $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('');
});