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.

我的指令手表触发并给出焦点同伙元素（基于code发现在这里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 中的控制器范围（指令外）不切换回假指令完成时。

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.

此切换回假当我打电话 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：

有关张贴问题，我删除code小一点。在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'" />

如果在输入字段皮，然后重新显示（根据 NG-如果）的指令将适当给予重点在第一时间 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.

推荐答案

您所遇到的问题是一个普遍的问题。

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.

和在你的控制器有：

$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屋！