angularjs控制器和指令數據綁定不起作用

Question

我有一個控制器和一條指令，希望對對象使用兩種方式的數據綁定。 該指令的目的僅僅是更新值。 當前，我無法使數據綁定正常工作，因為在更新綁定變量時，在onchange事件中，div的背景顏色不會更改。 同樣，當我打開色輪時，色輪的值不是scope.activeColor 。

我的HTML看起來像這樣，它具有指令和ng樣式的div 。

 <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
                     }
                 });