Javascript 如何访问指令链接中的子模型引用？

我将引导着色选择器与angular指令结合使用

在我的表单中是colorpicker，我想观察它的变化。 由于colorpicker jQuery插件更新了colorpicker的值，因此无法工作。我知道我必须在我的指令中实现这一点，但不知道如何实现

在my中，我有以下标记：

<div data-colorpicker class="input-group colorpicker-element">
    <input id="background" type="text" class="form-control" data-ng-model="myModel.background" />
    <span class="input-group-addon"><i></i></span>
</div>

到目前为止还不错。请注意，colorpicker连接在包装div上，这是我的问题所在

我将代码扩展到如下内容：

myDirectives.directive('colorpicker', function() {
  return {
      restrict: 'A',
      require : '?ngModel',
      link: function(scope, element, attrs, ngModel) {
          element.colorpicker().on('changeColor', function(ev) {
              scope.$apply(function() {
                  ngModel.$setViewValue(ev.color.toHex());
              });
          });
      }
  };
});

但问题是ngModel是在输入上定义的，而不是在包装div上定义的

---

我可以访问子作用域/ngModel吗？

最简单的方法是将所有html封装在一个指令中

模板：

<div class="input-group colorpicker-element">
    <input id="background" type="text" class="form-control" data-ng-model="ngModel" />
    <span class="input-group-addon"><i></i></span>
</div>

然后您可以在控制器中使用它：

<colorpicker ng-model="myModel.background" />

至少因为（1）指令名“colorpicker”与html中的任何内容都不匹配，（2）函数

link（）

的第四个属性是一个控制器数组。@斯大林科实际上，如果将第四个属性设为数组，那么当您声明

require:['myCtrl1'，'myCtrl2']

时，您将得到一个数组，然而，在本例中显示的方法是，您将只获得所请求的控制器。

myDirectives.directive('colorpicker', function() {
  return {
      restrict: 'E',
      require : '?ngModel',
      scope: {
          'ngModel': '='
      },
      link: function(scope, element, attrs, ngModel) {
          element.colorpicker().on('changeColor', function(ev) {
              scope.$apply(function() {
                  ngModel.$setViewValue(ev.color.toHex());
              });
          });
      },
      templateUrl: '/partials/colorpicker.html'
  };
});

<colorpicker ng-model="myModel.background" />