Question

我正在尝试将jquery minicolors合并到一个angular指令中。该指令绑定到一个带有ngModel的文本框。当我输入颜色代码时，手表会检测到更改后的值，但是当我使用colorpicker选择它时，该值不会反映在范围变量中。任何人都可以告诉我我做错了什么？

<input minicolors="colorPickerSettings" type="text" data-ng-model="category.ToBeConfirmedEventColor">


angular.
module('myApp', [])
.directive('minicolors', function () {
    return {
        require: 'ngModel',
        restrict: 'A',
        link: function (scope, element, attrs, ngModel) {            

            //gets the settings object
            var getSettings = function () {                    
                return angular.extend({}, scope.$eval(attrs.minicolors));
            };

            //init method
            var initMinicolors = function () {
              //  debugger
                if (!ngModel) {
                    return;
                }
                var settings = getSettings();

                //initialize the starting value, if there is one
                ngModel.$render = function () {
                    if (!scope.$$phase) {
                        //not currently in $digest or $apply
                        scope.$apply(function () {
                            var color = ngModel.$viewValue;
                            element.minicolors('value', color);
                        });
                    }
                };

                // If we don't destroy the old one it doesn't update properly when the config changes
                element.minicolors('destroy');

                // Create the new minicolors widget
                element.minicolors(settings);

                // Force a render to override whatever is in the input text box
                ngModel.$render();
            };

            // Watch model for changes  and then call init method again if any change occurs
            scope.$watch(getSettings, initMinicolors, true);
        }
    };
});

Answer 1

每当插件内发生更改时，angular.js都不知道它输入有效，因为ngModel在输入元素更改事件上设置了事件侦听器 minicolors触发更改事件，以便您可以注册事件侦听器来更新模型。

看看in the docs。

element.minicolors({
  value: color,
  change: function(hex, opacity) {
    // update the model
  }
});

在angular.js中使用jquery minicolors

1 个答案: