嵌套指令和NgModel

Question

我覺得我錯過了Angular指令的基本概念。

參照此Plnkr：http://plnkr.co/edit/WWp9lB6OvxHL8gyBSU5b?p=preview

我有一個模型：

{ 
    message: string, 
    value: number 
} 

而且我有一個的itemEditor指令編輯模式：

.directive('itemEditor', function() { 
    return { 
     replace: true, 
     templateUrl: 'item.editor.html', 
     require: 'ngModel', 
     model: { 
     item: '=ngModel' 
     } 
    }; 
    }) 

但我想委派編輯自定義控件的值：

.directive('valuePicker', function() { 
    return { 
     replace: true, // comment this to make it work 
     templateUrl: 'value.picker.html', 
     require: 'ngModel', 
     scope: { 
     ngModel: '=' 
     }, 

     controller: Controller 
    }; 

    function Controller($scope, Values) { 
     $scope.values = Values; 
     console.log({scope:$scope}); 
    } 

    }) 

在目前，這個代碼給出了錯誤：

Error: $compile:multidir 
Multiple Directive Resource Contention 

談到了取代：真將使此代碼工作。但是，我丟失了父模板的樣式說明。 I.E：類窗體控件未合併到select元素上。

什麼是使這項工作的角度方式？

Answer 1

您在這裏兩次

<value-picker class="form-control" style="width:100%" name="item" value-picker ng-model="item.value"></value-picker> 

的value-picker元素包含調用value-pickervalue-picker屬性爲好，既被視爲指令，它在衝突造成多個指令錯誤。刪除屬性value-picker，將其稱爲元素或屬性。或者您可以restrict該指令來進行特定的聲明。

而且從value.picker.html模板select元素，這導致另一個錯誤刪除ng-model：

Multiple directives [ngModel, ngModel] asking for 'ngModel'

所以replace: true替換並追加電流指令屬性模板元素的根目錄下（在你的情況下，其select）

Updated Plnkr