Angularjs 嵌套指令与NgModel

我觉得我缺少了角度指令的一个基本概念

关于本Plnkr：

我有一个模型：

{
  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

注释replace:true将允许此代码工作。但是，我丢失了父模板中的样式说明。即：类表单控件未合并到select元素上

---

什么是角度的方法来实现这一点？

您在这里调用了两次

值选择器

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



值选取器
元素也包含
值选取器
属性，两者都被视为指令，冲突导致多个指令错误。删除属性
值选择器
，将其称为元素或属性。也可以将指令添加到特定的声明中

同时从
value.picker.html
模板的
select
元素中删除
ng model
，这会导致另一个错误：

多个指令[ngModel，ngModel]请求“ngModel”

因此
replace:true
将当前指令属性替换并附加到模板元素的根级别（在您的示例中，它的
select
）

啊。。我懂了。因此，ng模型也被合并到模板中。杰出的多谢各位！