双向数据绑定不适用于指令

时间:2013-10-16 23:25:51

标签: angularjs angularjs-directive angularjs-scope

我有一个指令,我希望更改此指令给出的ng-model值 ... 我正在设置scope: {ngModel: '='}并且我正在更改指令中的ngModel值(在点击事件上),但我无法在外部/原始对象上看到更改。

plunker显示问题......

1 个答案:

答案 0 :(得分:3)

这里有一些问题,所有这些都是常见的错误。

  1. 使用$(...).on(...)通过jQuery注册的事件处理程序将在角度上下文之外执行,因此angular不知道事情何时更新。要解决此问题,您必须将内容包装在scope.$apply这样的呼叫中

    $('#aaa').on('click', function() {
        _scope.$apply(function(){
            _scope.ngModel = 'Other Value';
            updateTemplate();
        });
    });
    

    这将使用ng-model更新对输入的绑定。实际上,您可以通过使用ng-click指令来避免这样做。

  2. 使用angular,您无需使用.html(...)自行更新此类模板。绑定是框架的主要特征之一。您可以通过在{{ ... }}内放置表达式来使用插值,而不是使用更新功能,并且当您的模型出现时,您的DOM将会更新。例如,在定义指令时,您可以使用

    template: '<div id="aaa">{{ngModel}}</div>'
    

    设置模板,{{ngModel}}将显示ngModel的当前值。

  3. ngModel不仅仅是任何属性,它是一个强大的指令。如果您需要自己的指令来声明当前模型有效或无效,或者与表单交互,那么您应该通过控制器上的require属性使用它(参见here)。

    如果您不需要这些功能,那么您应该将您的属性称为不同的属性以避免冲突。

  4. 我更新了plunker以包含这些要点。