嵌套指令和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