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适用于范围值作为字符串。

目前发生的情况是$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等其他方法也适用于此。也许您不需要自定义指令来完成此任务。

观察指令中的click事件

2 个答案: