瞭解自定義指令和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

回答

相關問題