观察指令中的点击事件

Question

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

    $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 函数中，我添加了 header 标志并监听标志的变化以将其删除，就像这样

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

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

但是，我的代码的实际行为是立即添加和删除徽标，无论 $scope.headerflag 设置为什么。也就是说，$attrs.observe('removeheaderflag', ...里面的代码马上就是运行。

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

Answer 1

$observe 与 $watch 的工作原理相同，两者之间的唯一区别是 $observe 适用于插值表达式 {{}} 而 $watch 适用于范围值作为字符串。

目前发生的事情是当你的变量 removeheaderflag 从 undefined 到 null 时你的 $observe 函数被调用所以在这种情况下 $observe 回调函数接到电话，你的 blahClassName class 从 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 为我们处理此问题可能证明是一个可行的解决方案。为什么不使用 display: none 规则将 headerflag 绑定到 class？一个示例可能包括...（这里是关于标记的示例）...

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

.remove {
    display: none;
}

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

JSFiddle Link - ngClass

示例

ngIf 等其他方法也适用于此。也许您不需要自定义指令来完成此操作。

观察指令中的点击事件

observe a click event in a directive

javascript

html

angularjs

angularjs-directive

dom-manipulation