Angular 指令不会随着范围更新而更新 [英] Angular directive does not update as scope updates
问题描述
我的指令在其范围更新时明显失败,这让我感到困惑.
I'm puzzled by the apparent failure of my directive to update whenever its scope updates.
我想将 3 个不同表单字段中的字符相加,从 29 中减去该长度(原因...),然后将该总数作为一个字符串输出到指令模板中包含的一段 DOM 中.
I want to add up the characters in 3 different form fields, subtract that length from 29 (cause of reasons...), and output that total as a string in a piece of DOM contained in the directive template.
指令:
return {
restrict: 'AE',
replace: true,
templateUrl: '<span>{{remainingChars}} remaining</span>',
scope: {
checktype: '=',
checknumber: '=',
depositnote: '='
},
link: function (scope, elem) {
scope.remainingChars = 29 - scope.checktype.length - scope.checknumber.length - scope.depositnote.length;
}
}
引用 index.html 中的指令:
Reference to directive in index.html:
<deposit-note
checknumber="transaction.checkNumber"
checktype="transaction.checkType"
depositnote="transaction.depositNote" />
这有点像:我可以在页面加载时逐步执行指令,并观察 scope.remainingChars
在指令第一次加载时设置为正确的数字.但是,如果我更改交易对象,则数字永远不会更新.
This works sort-of: I can step through the directive when the page loads and watch scope.remainingChars
get set to the right number when the directive loads the first time. However, if I change the transaction object, the number never updates.
如果我在 transaction
对象上设置 $watchCollection,我可以获得我想要的行为,但是我应该能够使用 '=' 两个-将该对象传递到隔离范围方式绑定机制.然而,该指令运行 1 次,计算正确,并且即使我更新它的模型绑定到的表单字段也不会再次更改它的值.
I can get the behavior I want if I set up a $watchCollection on the transaction
object, but I should be able to just pass that object into the isolate scope using the '=' two-way-binding mechanism. Yet the directive runs 1 time, calculates correctly, and never changes it's value again even when I update the form fields it's model is bound to.
一切都发生在作用域上,所以我认为我不需要运行 $apply(),我需要在指令中完成这个,因为我需要根据数字(正/消极的).否则,我只会在 index.html 中剩下类似 <span>{{29 - transaction.checkType.length - transaction.checkNumber.length - transaction.depositnote.length}} 之类的东西</span>
.
Everything is happening on scope, so I don't believe I need to run $apply(), and I need this to be done in a directive because I need to apply styling to the DOM based on the number (positive / negative). Otherwise I would just have something like <span>{{29 - transaction.checkType.length - transaction.checkNumber.length - transaction.depositnote.length}} remaining</span>
in index.html.
我在这里错过了什么?谢谢!
What am I missing here? Thanks!
推荐答案
link 在初始指令链接阶段只运行一次.
link is only run once, during the initial directive link phase.
有几种方法可以做到这一点:在作用域上有一个名为剩余字符()的函数,并在那里返回正确的数量.然后在你的模板中有 {{remainingChars()}}
There's several ways to do this though:
Have a function on the scope called remainingChars(), and return the correct amount there. Then in your template have {{remainingChars()}}
其次,你可以有一个 watch 表达式:
Second, you could have a watch expression:
$scope.$watch(function() {
// watch expression, fires the second function on change
return transaction.checkNumber.length - transaction.depositnote.length}, function() {
//update the remainingchars value here in the second function
})
或者第三,使用某种 ng-change 事件处理程序来更新剩余字符变量.
Or third, have some kind of ng-change event handler which updates the remainingchars variable.
ng-change="calcRemanining()"
这篇关于Angular 指令不会随着范围更新而更新的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!