如何在指令link中访问ngModel的子引用

How to access child ngModel reference in directive link?

本文关键字：ngModel 引用 访问 指令 link      更新时间：2023-09-26

我将bootstrap-colorpicker与angular指令结合使用。

在我的表单是colorpicker，我想看的变化。由于颜色选择器的值是由这个颜色选择器jQuery插件更新的，所以这不起作用。我明白我必须在我的指令中实现这一点，但不知道如何。

里面我有以下标记:

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

最简单的方法是把所有的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'
  };
});

然后你可以在controller:

中使用它
<colorpicker ng-model="myModel.background" />
相关文章：