простая входная директива выбора цвета в угловых

0

У меня есть десять цветов, я хочу написать директиву, показывающую 10 ящиков с этими цветами, и пользователь выбирает один из этих цветов, я хочу, чтобы это было так: colors - это массив цветов в шестнадцатеричном формате

Вот что я придумал до сих пор:

(function (angular) {
    "use strict";
    angular.module('color-picker', [])
        .directive('colorPicker', function () {
            return {
                restrict: "E",
                scope: {
                    colors: "="
                },
                templateUrl: "color-picker.html",
                link: function (scope, elem, attrs) {
                    scope.setColor = function(color) {
                        scope.selectedColor = color;
                    }
                }
            }
        })

})(angular);

и вот шаблон:

<div>
    <div class="color-box" ng-repeat="color in colors">
        <div class="color" ng-style="{'background-color': color}" ng-click="setColor(color)">
        </div>
        <div class="color-name text-center">
            #{{color}}
        </div>
    </div>
</div>

что я должен сделать, чтобы сделать его ngModel мудрым? как обычный ввод с проверкой и привязкой данных?

  • 0
    что вы подразумеваете под ngModel мудрым
  • 0
    @KaushalNiraula Если вы посмотрите на директиву, я хочу использовать ng-model для получения цвета из моей директивы.
Теги:
validation
input
angular-ngmodel
angularjs-directive

3 ответа

1
Лучший ответ

В области директивы и двусторонней привязки для selectedColor

scope: {
    colors: "=",
    selectedColor: "="
},

При использовании директивы:

<color-picker colors="<color_list_var>" selected-color="<selected_color_var>"></color-picker>

Если вы хотите использовать его внутри form с помощью input и ngModel, проверьте эту ссылку. Таким образом, директива будет выглядеть так:

app.directive('colorPicker', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      element.colorPicker({
        // initialize the color to the color on the scope
        pickerDefault: scope.color,
        // update the ngModel whenever we pick a new color
        onColorChange: function(id, newValue) {
          scope.$apply(function() {
            ngModel.$setViewValue(newValue);
          });
        }
      });

      // update the color picker whenever the value on the scope changes
      ngModel.$render = function() {
        element.val(ngModel.$modelValue);
        element.change();                
      };
    }
  }
});

и в HTML

<input color-picker ng-model="project.color">
Поделиться
  • 0
    Если я хочу использовать его внутри формы и использовать required директиву, этот метод все еще работает?
0

Сделать ngModel мудрым - это довольно широкий вопрос. Но то, о чем я сейчас могу думать.

  1. Вы можете вызывать данные setColor снаружи, поэтому ваша директива сообщит, какой пользователь выбрал.

как:

return {
    restrict: "E",
    scope: {
        colors: "=",
        selectedColor: "&"
    },
    templateUrl: "color-picker.html",
    link: function (scope, elem, attrs) {
        scope.setColor = function(color) {
            scope.selectedColor({color: color});
        }
    }
}

Таким образом, вы можете передавать данные в свою функцию, которые будут вызываться, когда пользователь выберет значение, или вы можете передать выбранное значение вашему контроллеру, но вы можете потребовать часы.

  1. Вы можете установить какой-либо идентификатор или какой-то идентификатор для каждого вашего выбора цвета. Таким образом, вы можете передать это значение с выбранным пользователем значением.

  2. Поскольку у вас может быть вход, где пользователь может писать регулярное выражение, или вы можете попросить их выбрать, как есть. Вроде: Fiddle

Таким образом, вы можете получить подтверждение, например, если пользователь не написал что-то в своем списке или нет.

Но опять же все, что вам нужно, какую проверку или функциональность вы хотите в своей директиве.

Некоторые примеры.

Есть много других, поэтому вы можете проверить их и получить дополнительную идею для разработки этой директивы.

РЕДАКТИРОВАТЬ:

Как вы уже упоминали, вы можете использовать как ngModel, как показано ниже. JS:

return {
    restrict: "E",
    scope: {
        colors: "=",
        ngModel: "=selectedColor"
    },
    templateUrl: "color-picker.html",
    link: function (scope, elem, attrs) {       
        scope.setColor = function(color) {
            scope.selectedColor = color;
        }
    }
}

HTML:

<color-picker ng-model="userSelectedColor"></color-picker>

И вы хотите больше способов сделать то же самое, вы можете проверить этот ответ qaru.site/questions/25462/....

Поделиться
  • 0
    спасибо за ваш ответ, что мне делать, если я хочу получить выбранный цвет через ng-model и привязать его к y-области таким образом?
0

Вот как я решил свою проблему:

(function (angular) {
    "use strict";
    angular.module('color-picker', [])
        .directive('colorPicker', function () {
            return {
                restrict: "E",
                require: 'ngModel',
                scope: {
                    colors: "="
                },
                templateUrl: "color-picker.html",
                link: function (scope, elem, attrs, ngModel) {
                    scope.setColor = function (color) {
                        scope.selectedColor = color;
                    };

                    scope.$watch(function () {
                        return scope.selectedColor;
                    }, function (newValue, oldValue) {                            
                        if (newValue === oldValue)
                            return;
                        ngModel.$setViewValue(newValue);
                    })
                }
            }
        })
})(angular);
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню