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

Question

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

我的指令监视触发器并将焦点放在 associates 元素上（基于在 SO 找到的代码）：

 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 changes.之后它将再次停止工作……除非重复隐藏/显示过程。

原文由 Nicholas Pappas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您遇到的问题是处理范围内的原始值（布尔值、整数等）时的常见问题。

我强烈建议阅读 Understanding Scopes 文章。 （简短回答：原语在指令的隔离范围内发生变化，并且不会在父范围（即您的控制器范围）的链中查找）。

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

 scope: {
   triggerObj: '=focusMe'
},

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

在你的控制器中有：

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

拥有一个对象将确保双向绑定有效。当你有时间的时候阅读上面的文章:)

原文由 Omri Aharon 发布，翻译遵循 CC BY-SA 3.0 许可协议

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 。

原文由 Elad 发布，翻译遵循 CC BY-SA 3.0 许可协议