javascript - Angular Directive(指令)，与 bool 值的双向数据绑定(bind)只能工作一次

Question

尝试测试一个简单的指令，如果传递的值为 true，该指令将运行，但它只能运行一次。

指令:

.directive('myDirective', function(){
        return {
            restrict: 'A',
            scope: {
               triggerObj: '@myDirective'
            },
            link: function (scope, elem, attrs) {
                scope.$watch('triggerObj', function() {
                    alert('success')
                });
            }
        };
    })

Controller :

$scope.triggerObj = {};
$scope.triggerObj.trigger = false;

$scope.passValue = function(){
    //set to true
    $scope.triggerObj.trigger = true;
}

查看:

<div my-directive='{[triggerObj.trigger]}'>
<button type='button' ng-click='passValue()'>click</button>

还尝试在设置为 true 之前将值重置为 false，但仍然只能工作一次。

Answer 1

它只起作用，因为 passValue() 函数将 $scope.triggerObj.trigger 设置为 true。并且您的 $watch 仅当旧值不等于新值时才起作用，但您首先将 $scope.triggerObj.trigger 从 false 更改到 true，而所有其他时间都没有任何变化(您只是试图将 $scope.triggerObj.trigger 从 true 更改为 true 再次)。

要实现这一点，请尝试将 $scope.passValue 函数升级为:

$scope.passValue = function() {
  if($scope.triggerObj.trigger) {
    $scope.triggerObj.trigger = false;
  } else {
    $scope.triggerObj.trigger = true;
  }
}