我有一个指令,我希望更改此指令给出的ng-model值 ...
我正在设置scope: {ngModel: '='}
并且我正在更改指令中的ngModel值(在点击事件上),但我无法在外部/原始对象上看到更改。
此plunker显示问题......
答案 0 :(得分:3)
这里有一些问题,所有这些都是常见的错误。
使用$(...).on(...)
通过jQuery注册的事件处理程序将在角度上下文之外执行,因此angular不知道事情何时更新。要解决此问题,您必须将内容包装在scope.$apply
这样的呼叫中
$('#aaa').on('click', function() {
_scope.$apply(function(){
_scope.ngModel = 'Other Value';
updateTemplate();
});
});
这将使用ng-model
更新对输入的绑定。实际上,您可以通过使用ng-click
指令来避免这样做。
使用angular,您无需使用.html(...)
自行更新此类模板。绑定是框架的主要特征之一。您可以通过在{{ ... }}
内放置表达式来使用插值,而不是使用更新功能,并且当您的模型出现时,您的DOM将会更新。例如,在定义指令时,您可以使用
template: '<div id="aaa">{{ngModel}}</div>'
设置模板,{{ngModel}}
将显示ngModel
的当前值。
ngModel
不仅仅是任何属性,它是一个强大的指令。如果您需要自己的指令来声明当前模型有效或无效,或者与表单交互,那么您应该通过控制器上的require
属性使用它(参见here)。
如果您不需要这些功能,那么您应该将您的属性称为不同的属性以避免冲突。
我更新了plunker以包含这些要点。