Angular指令监视变量未触发

Question

首先，这是代码 ：

app.controller('MainCtrl', function($scope) {
  $scope.test="Hello!";
  $scope.updateFlag = false;
  function updateFunc(){
    $scope.updateFlag = true;
  }
  $scope.updateFunc = updateFunc;

});



app.directive('dir1', function(){
  return {
    scope:{
      updateFunc:'='
    },
    link: function(scope,element,attr,ctrl){
      element.bind('click', scope.updateFunc);
    }
  }
});

app.directive('dir2', function(){
  return {
    template: '{{privateVal}}',
    scope:{
      updateFlag:'='
    },
    link: function(scope,element,attr,ctrl){
      scope.privateVal= "Not working!";
      scope.$watch(scope.updateFlag, function(newval, oldval){
        alert("watch triggered");
        if (newval===true){
          scope.privateVal = "Worked!!";
        }
      })
    }
  }
});

我有2个指令，其中1个指令与全局函数绑定有2种方式，另一个指令则监视全局变量正在变化的全局变量。 但是，以某种方式调用全局函数时，不会触发我的监视函数。 任何帮助是极大的赞赏。

谢谢，

Answer 1

因为您正在调用本机click事件，所以不会调用digest周期。 使用$timeout解决：

app.directive('dir1', function($timeout){
  return {
    scope:{
      updateFunc:'='
    },
    link: function(scope,element,attr,ctrl){
      element.bind('click', function()
      {
        $timeout(scope.updateFunc)
      });
    }
  }
});

http://plnkr.co/edit/ReqExBvlPuRL5vp7WJ0y?p=preview

Answer 2

如果您不希望使用此超时选项来执行此操作，则可以使用其他几种方法来解决该问题，我认为这有一些优点：

1.）不要使用隔离范围。 刚刚从控制器调用了方法：

<button dir1 ng-click="updateFunc()">Click me!</button>

2.）使用隔离范围，仍然使用ng-click，但是像这样： http : //plnkr.co/edit/TrahxB 。

您将函数作为属性传递。 使用＆的绑定模式并从范围对象中获取它。 您会看到我将其称为“更新”，然后使用ng-click = update（）在指令中运行它。 这也将允许您将数据从指令传递到对象映射中的控制器，这在您构建时可能会很有用！
这是一个很好的教程来解释这一点。

另外，如果您想要隔离范围的指令，但又不需要隔离该函数，则可以将所有单击逻辑放入DOM，然后将其包含到指令中-使用＃1中的策略。 排除的dom元素在父级的控制器范围内- 参见this 。

3.）使用隔离范围，您可以在指令上使用ng-click来调用指令链接功能上的函数，以发出要在控制器上监视的事件。