Директива не отслеживает изменения атрибута значения

Question

Директива не отслеживает изменения атрибута значения

0

У меня есть выбор цвета, который открывается, когда я нажимаю в поле ввода, и он записывает выбранную строку RGBA для ввода value атрибута.

Сначала я подумал, что добавив ng-model="color" в тег input будет достаточно, чтобы color переменная удерживала/связывала строку цвета rgba, которую я выбираю, но она не сработала. Поэтому я попытался добавить настраиваемую директиву для просмотра изменений атрибутов входных value на

// js
.directive('bindInput', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch( attrs.value , function (v) {
                console.log('value changed, new value is: ' + v);
            });
        }
    };
})

// html (jade)
input#text-highlight(ng-model="color",type="text",value="",bind-input)

Если я открою консоль, я увижу, что value changed выводится один раз при обновлении. Если я попытаюсь изменить цвет, открыв подборщик цветов, я вижу, что значение появляется во входе, если я проверяю значение атрибута значения с помощью jquery (по $ ("text-highlight"). Val()) Я также вижу, что новое значение цвета установлено на атрибут входного value. Но почему я не получаю больше value changed сообщениями в консоли?

Может быть, я делаю что-то совершенно неправильное здесь. В результате я хочу иметь только новое значение цвета, которое хранится в $scope.color.

kaytrance 26 нояб. 2015, в 10:56

Источник

0

Этот ответ на директиву + средство выбора цвета может быть полезен для вас stackoverflow.com/a/20930713/3819736 jsfiddle.net/BinaryMuse/AnMhx
sbedulin 26 нояб. 2015, в 09:27

Теги:

angularjs

1 ответ

Ещё вопросы

Этот ответ на директиву + средство выбора цвета может быть полезен для вас stackoverflow.com/a/20930713/3819736 jsfiddle.net/BinaryMuse/AnMhx

Elvin V-ev · Answer 1 · 2015-11-26T06-18-00.000Z

Вам нужно связать свойство области с вашей директивой, чтобы посмотреть ее внутри директивы:

return {
    restrict: 'AE',
    scope: {
      myVar: '='
    },
   ...
}

  $scope.$watch('myVar', function(value) {
    // do something 
  });

И в вашем случае вы должны что-то вроде этого:

scope: { value : '@'};

scope.$watch(attrs.value, function (newVal) {
  //do something with the new val
});