观察指令中的点击事件

Question

在我的控制器的原始版本中，我在 dom 中添加了一个标头徽标，然后能够在调用函数时将其删除并替换为其他内容，就像这样

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

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

但是，我的代码的实际行为是立即添加和删除徽标，无论 $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('');
});   

Answer 2

您能否检查您的$observe 中的返回值是否为您希望的值——在本例中为true？观察以下变化...

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

此外，根据 cmets 中的讨论，您也许可以为此采取替代方法。由于您的 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 等其他方法也可能适用于此。也许您不需要自定义指令来完成此操作。