了解自定义指令和ngModelController

尽管大量在线示例的数量，但我无法围绕正确的方式使用ng-model作为我的自定义指令。了解自定义指令和ngModelController

我想实现一个自定义指令，基本上是一个<select>标记，并带有固定的选项，选中时将在模型中设置布尔值。

总之，我希望能够用我的指示是这样的：

<my-directve ng-model="amodel.options"></my-directive>

这应该呈现一个选择，当用户选择一个选项更新amodel.options进行相应设置：

选项A：amodel.options.foo = true，amodel.options.bar = false
选项B：amodel.options.foo = false，amodel.options.bar = true
选项C：amodel.options.foo = true,amodel.options.bar = true

我该如何做到这一点？我得到了这么多：

angular.module("myApp") 
    .directive("myDirective", function() { 
    return { 
     restrict: "E", 
     replace: true, 
     require: "ngModel", 
     scope: {}, 
     template: '<select ng-model="internal">' + 
        '<option value="0">Option A</option>' + 
        '<option value="1">Option B</option>' + 
        '<option value="2">Option C</option>' + 
        '</select>', 
     link: function(scope, element, attr, ngModel) { 

      var mappings = [ 
       { foo: true, bar: false }, 
       { foo: false, bar: true }, 
       { foo: true, bar: true } 
      ]; 

      scope.$watch("internal", function(val) { 
       ngModel.$modelValue.foo = mappings[val].foo; 
       ngModel.$modelValue.bar = mappings[val].bar; 
      }); 
     }, 
    }; 
});

但是，所有这一切是给我的错误，ng-model是冗余使用。

我试着去随着各种教程，但他们没有工作对我来说...

我将如何正确地做到这一点？

在此先感谢！

来源

2014-10-27 DeX3

问题是，您正在将replace属性设置为true。这意味着两件事情：

该指令的HTML将被template HTML
所有属性/从旧元素类将被迁移到新的（包括ng-model）

被替换

这最后一步是造成“ng-Model冗余使用”的错误错误。

为了解决它，你只需要删除replace属性。另外，请记住，replace属性将为deprecated，因此越早停止使用它就越好。

Demo

来源

2014-10-27 10:25:00 bmleite

哇，谢谢你啊！我是如此接近，但迄今为止...... – DeX3 2014-10-27 10:42:19

另一种选择，是做一个2范围到ngModel值的范围绑定。 require：'ngModel'就是这样，如果没有使用ngModel，它会抛出一个错误，据我所知在这里是强制性的。通过这种方式，您可以将您的内部绑定到指令中的ngModel值，其余部分由angular处理。参见下面的链接：[link]（http://plnkr.co/edit/LLgPU9tbzGf8ya9KZ3rB） – PiniH 2014-10-27 10:42:22

了解自定义指令和ngModelController

回答

相关问题