javascript - 带有选择字段和 ngOptions 的 AngularJS ngModel 指令

Question

我试图在使用 ngOptions 的选择字段上使用 AngularJS 在 ngModel 指令的链接回调期间运行一些代码。

module.directive("ngModel",function(){
    console.log('ng-model called');
    return {
      restrict: 'A',
      priority: -1, // give it lower priority than built-in ng-model
      link: function(scope, element, attr) {
         console.log('watching');
         scope.$watch(attr.ngModel,function(value){                
            if (value){
                console.log("changing");
            }
         });
       }
     }
});

看到这个演示问题的小提琴：http: //jsfiddle.net/d3r3zwLj/3/

第一个选择字段使用 ng-options 填充，而第二个选择字段的选项明确写在 html 中。如果您打开控制台，您可以看到您只在更改第二个选择字段时看到“更改”消息。改变第一个没有任何作用。

您还会立即注意到，您只看到“ng-model called”和“watching”一次，即使有两个字段带有 ng-model。

我希望 ngModel 指令适用于两个选择字段。ng-options 做了什么阻止 ngModel 工作？

谢谢！

Answer 1

查看 ng-options 的文档： https ://docs.angularjs.org/api/ng/directive/ngOptions

“指令信息此指令以优先级 0 执行。”

如果将指令的优先级更改为 0，则它运行成功。我不确定所有的含义是什么，但这就是它发生的原因。

Answer 2

当你使用 ng-options 指令时，它有另一个可选的 ng-model 指令，它实际上设置了从选项中显示的默认值。因此，在您的情况下，第二个列表没有 ng-options 指令，这使得 ng-model 看起来像一个普通的。也许您可以更改指令的名称。

Answer 3

这是更新内置指令功能的不好方法，decorators是否有此目的。检查文档