AngularJS指令双向数据绑定在观察布尔值时不起作用

Question

我有一个双向数据绑定,不会改变发送到指令的变量的值.

我的指令监视触发器并将关注点放在关联元素上(基于此处的代码):

app.directive('focusMe', function ($timeout) {
  return {
    scope: {
      trigger: '=focusMe'
    },
    link: function (scope, element, attrs) {
      scope.$watch('trigger', function(value) {
        console.log("directive value: " + value);
        console.log("directive start: " + scope.trigger);
        if (value === true) {
          $timeout(function () {
            element[0].focus();
            scope.trigger = false;
            console.log("directive end: " + scope.trigger);
          });
        }
      });
    }
  }
});

在HTML中我称之为:

<input type="text" ng-model="item.value" focus-me="focusInput" />

当我第一次触发它时,它可以工作 - 因为focusInput变量会切换它的值.但是focusInput在控制器范围内(指令外)不会切换回false指令完成时.

这种切换false应该在我打电话时发生scope.trigger = false,假设我明白应该发生什么.

缺少什么会导致双向绑定不将值推回到传递给指令的变量？

更新01:

为了发布问题,我删除了一小段代码.HTML实际上看起来像这样:

<input type="text" ng-model="item.value" focus-me="focusInput" ng-if="item.condition != 'matches' && item.condition != 'does not match'" />

如果input字段隐藏然后重新显示(基于ng-if),则指令将在第一次focusInput更改时正确地给出焦点.之后它将再次停止工作......除非重复隐藏/显示过程.

Answer 1

在范围内处理原始值(布尔值,整数等)时,您遇到的问题是一个常见问题.

我强烈建议阅读Understanding Scopes文章.(简短回答:原语在指令的隔离范围内被更改,并且不会寻找父范围的链,即您的控制器范围).

至于如何解决你的情况,我建议使用点表示法并将你的原语存储在一个对象中,并将这个对象绑定到你的指令:

scope: {
   triggerObj: '=focusMe'
},

并确保现在指令中的触发器引用scope.triggerObj.trigger.

在你的控制器中有:

$scope.triggerObj = {};
$scope.triggerObj.trigger = true; //or false, what have you

拥有一个对象将确保双向绑定将起作用.有空的时候阅读上面的文章:)

Answer 2

指令创建范围.当您将参数传递给作用域时,通过引用传递的对象和通过值传递的布尔值(以及数字,字符串...).

例如:

function changeToFalse(bool) {
    bool= false;
    console.log(bool);  // false
}


function changeObjToFalse(obj) {
    obj.bool= false;
    console.log(obj.bool);  // false
}

var obj = {bool : true};

changeToFalse(obj.bool);
console.log(obj.bool);  // true
changeObjToFalse(obj);
console.log(obj.bool); // false

另见同一问题 - 双向绑定不能与ng-repeat一起使用.