Question

我正在使用bootstrap-colorpicker和angular指令。

在我的表单中是colorpicker，我想要观察更改。由于colorpicker jQuery插件更新了colorpicker的值，这不起作用。我知道我必须在我的指令中实现这一点，但无法弄清楚如何。

在我的内部，我有以下标记：

<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>

bootstrap-colorpicker需要此标记。注意我添加了data-colorpicker指令，该指令用以下颜色初始化颜色选择器：

myDirectives.directive('colorpicker', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.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吗？

Answer 1

最简单的方法是将所有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>

指令代码：

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" />

如何在指令链接中访问子ngModel引用？

1 个答案: