观察布尔值时，AngularJS 指令双向数据绑定不起作用 [英] AngularJS Directive Two-Way Data Binding Not Working When Observing Boolean

问题描述

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

I have a two-way data binding that is not altering the value of the variable sent to the directive.

我的指令监视触发器并将焦点放在 associates 元素上(基于 SO 上的代码):

My directive watches for a trigger and gives focus to the associates element (based on code found here at 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 中我这样称呼它:

In the HTML I call it as follows:

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

当我第一次触发它时，它起作用了——因为 focusInput 变量会切换它的值.但是当指令完成时，控制器范围内的 focusInput(指令之外)不会切换回 false.

When I trigger it for the first time, it works -- because the focusInput variable switches its value. But focusInput in the controllers scope (outside the directive) does not switch back to false when the directive completes.

这个切换回 false 应该在我调用 scope.trigger = false 时发生，假设我知道应该发生什么.

This switch back to false should happen when I call scope.trigger = false, assuming I understand what should be happening.

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

What is missing that would cause the two-way binding to not push the value back to the variable passed into the directive?

更新 01:

为了发布这个问题，我删除了一小段代码.HTML实际上是这样的:

For posting the question I removed a small bit of code. The HTML actually looks like this:

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

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

If the input fields hides and then is re-shown (based on the ng-if) the directive will properly give focus the first time focusInput changes. It will stop working again after that... unless the hide/show process is repeated.

推荐答案

您遇到的问题是在范围内处理原始值(boolean、int 等)时的常见问题.

The problem you are experiencing is a common problem when dealing with primitive values (boolean, int, etc..) within scopes.

我强烈建议阅读了解范围文章.(简短回答:原语在指令的隔离范围内发生变化，并且不会在父范围(即您的控制器范围)的链中向上查找.

I strongly suggest reading Understanding Scopes article. (short answer: primitives are changed in the directive's isolated scope, and are not seeked up the chain for the parent scope, i.e., your controller scope).

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

As to how to solve your situation, I suggest to use dot notation and store your primitive inside an object, and bind this object to your directive:

scope: {
   triggerObj: '=focusMe'
},

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

And make sure your trigger references in the directive are now scope.triggerObj.trigger.

并且在您的控制器中有:

And in your controller have:

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

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

Having an object will make sure the two way binding will work. And read the article above when you have time :)

这篇关于观察布尔值时，AngularJS 指令双向数据绑定不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！