问题描述
我有一个双向数据绑定,它不会改变发送到指令的变量的值.
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 指令双向数据绑定不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!