Angularjs - 指令上的ng-disabled执行顺序

时间:2022-08-22 16:55:57

I am having an Angular directive with 'ng-disabled' on it. It seems that the "disabled" attribute is updated only after the linking phase of my directive. Can it be fixed?

我正在使用一个带有'ng-disabled'的Angular指令。看来“禁用”属性仅在我的指令的链接阶段之后才更新。可以修复吗?

See this JSBin for an example.

有关示例,请参阅此JSBin。

When replacing the 'ng-disabled' with 'disabled="{{expression}}" it does work (but this will not work on old i.e browsers): JSBin

将'ng-disabled'替换为'disabled =“{{expression}}时,它确实有效(但这不适用于旧的浏览器):JSBin

Thanks!

1 个解决方案

#1


2  

Looking at angular's code, the ngDisabled directive works that way: its link function registers a watch that changes the attribute.

查看angular的代码,ngDisabled指令以这种方式工作:其链接函数注册一个更改属性的监视。

So, angular will execute that link function (higer priority than your directive), then your link function, then do a digest which will change the "disabled" attribute. So it's no surprising that the attribute is not set when your link function is called.

因此,angular将执行该链接函数(比您的指令更高的优先级),然后是您的链接函数,然后执行摘要,这将更改“禁用”属性。因此,调用链接函数时未设置属性也就不足为奇了。

https://github.com/angular/angular.js/blob/master/src/ng/directive/attrs.js#L354

If you do your console.log calls inside a $timeout() call, it will display the right CSS properties, because the $timeout() executes on the next digest.

如果你在$ timeout()调用中执行console.log调用,它将显示正确的CSS属性,因为$ timeout()在下一个摘要上执行。

#1


2  

Looking at angular's code, the ngDisabled directive works that way: its link function registers a watch that changes the attribute.

查看angular的代码,ngDisabled指令以这种方式工作:其链接函数注册一个更改属性的监视。

So, angular will execute that link function (higer priority than your directive), then your link function, then do a digest which will change the "disabled" attribute. So it's no surprising that the attribute is not set when your link function is called.

因此,angular将执行该链接函数(比您的指令更高的优先级),然后是您的链接函数,然后执行摘要,这将更改“禁用”属性。因此,调用链接函数时未设置属性也就不足为奇了。

https://github.com/angular/angular.js/blob/master/src/ng/directive/attrs.js#L354

If you do your console.log calls inside a $timeout() call, it will display the right CSS properties, because the $timeout() executes on the next digest.

如果你在$ timeout()调用中执行console.log调用,它将显示正确的CSS属性,因为$ timeout()在下一个摘要上执行。