angularjs контроллер и привязка данных директивы не работают

Question

У меня есть контроллер и директива, что я хочу использовать двустороннюю привязку данных к объекту. Цель директивы - просто обновить значение. В настоящее время я не получаю привязку данных к работе должным образом, потому что в событии onchange, когда я обновляю связанную переменную, цвет фона div не изменяется. Также, когда я открываю колесо цвета, значение колеса не является scope.activeColor.

Мой HTML выглядит так, он имеет директиву и div с ng-style.

<li ng-repeat="(key, color) in colors" ng-style="{'background': 'rgb(' + color.r + ',' + color.g + ','+ color.b}" ng-click="editColour(color)"> 
<div ng-style="{'background': 'rgb(' + activeColor.r + ',' + activeColor.g + ','+ activeColor.b}"></div> 

<input type="text" colorwheel value="currentColor"> 

В мой контроллер я определить объект:

$scope.editColour = function(colour) { 
    $scope.activeColor = colour; 
}; 

Моя директива следующее:

.directive('colorwheel', function() { 
     return { 
      restrict: 'A', 
      link: function(scope, element) { 
      var currentColor = 'rgb(' + scope.activeColor.r + ',' + scope.activeColor.g + ',' + scope.activeColor.b + ')'; 
      scope.currentValue = {color: currentColor}; 
      element.minicolors({ 
       control: 'wheel', 
       format: 'rgb', 
       inline: true, 
       opacity: false, 
       change: function(value, opacity) { 
       var rgb = element.minicolors('rgbObject'); 
       scope.activeColor.r = rgb.r; 
       scope.activeColor.g = rgb.g; 
       scope.activeColor.b = rgb.b; 
       console.log(rgb); 
       } 
      }); 
      } 
     }; 
    }); 

Answer 1

Вы должны наблюдать переменную activecolor в директиве, так что директива понимает, что переменная была изменена

Примером может быть

$scope.$watch('activeColor', function (newValue, oldValue) { 
        if (newValue) { 
         //do something with new value 
        } 
       });