角方向修正范围

Question

基本上，我有两个指令：

• 雷达图表(用于创建图表的通用指令)
• 用户雷达图(使用雷达图，不那么抽象)

radar-chart指令通过以下方法实例化：

<radar-chart data="" labels="" options="" colours=""></radar-chart>

user-radar-chart指令通过以下方法实例化：

<user-radar-chart preseverence="20" motivation="39"></user-radar-chart>

现在，user-radar-chart应该使用radar-chart指令，但是对于一组固定的标签、颜色和选项，数据应该是不同的。

我该怎么做？

这就是我尝试过的：

angular
    .module('myApp')
    .directive('userRadarChart', function () {
        return {
            restrict: 'E',
            template: '<canvas class="chart radar-chart" data="{{data}}" labels="{{labels}}" options="{{options}}" colours="{{colours}}"></canvas>',
            scope: {
                motivation: '@',
                preseverence: '@'
            },
            link: function ($scope, $element, $attrs) {
                $scope.data = [$attrs.motivation, $attrs.preseverence];
                $scope.labels = ['Motivation', 'Preseverence'],
                $scope.options = {};
                $scope.colours = ['Yellow'];
            }
        }
    })

Answer 1

有几种不同的方法可以做到这一点。最简单的方法(我认为这就是您的示例所得到的)是让user-radar-chart模板创建一个radar-chart指令：

此示例显示userRadarChart只是一个预置color选项的雷达图表。

.directive('radarChart', function() {

  return {
    restrict: 'E',
    template: "<span>I am a {{color}} radar chart, with data:</span>\
               <pre>{{ data | json }}</pre>",
    scope: {
      data: "=",
      color: '@'
    },

    link: function (scope, element){
      element.css('background-color', scope.color); 
    }
  }
})

.directive('userRadarChart', function() {
  return {
    restrict: 'E',
    scope: { data: "=" },
    template: '<radar-chart data="data" color="green"></radar-chart>'
  }
});

​

angular.module('myApp', [])

.controller('MyController', function () {
  this.data1 = {
    foo: 'bar'
  }
  this.data2 = {
    dog: 'bone' 
  }
})

.directive('radarChart', function() {

  return {
    restrict: 'E',
    template: "<span>I am a {{color}} radar chart, with data:</span>\
               <pre>{{ data | json }}</pre>",
    scope: {
      data: "=",
      color: '@'
    },
  
    link: function (scope, element){
      element.css('background-color', scope.color); 
    }
  }
})

.directive('userRadarChart', function() {
  return {
    restrict: 'E',
    scope: { data: "=" },
    template: '<radar-chart data="data" color="green"></radar-chart>'
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="MyController as ctrl">
    <radar-chart color="red" data="ctrl.data1"></radar-chart>
    <user-radar-chart data="ctrl.data2"></user-radar-chart>
  </div>
</div>

​

注意到，上面不需要观察器，因为我们使用的是=，所以data值利用了角的双向数据绑定的优点。

另一种选择是将user-radar-chart设置存储在radar-chart指令中，并在radar-chart上只有一个type属性，该属性将为您配置图表：

.directive('radarChart', function() {

  return {
    restrict: 'E',
    scope: {
      data: "=",
      color: '@'
    },

    link: function (scope, element, attrs){
      if (attrs.type === "user")
        // define user-radar-chart settings here.
        scope.color = 'green';
      element.css('background-color', scope.color);

    }
  }
});

有更多的方法可以做到这一点，但是如果你正在制作的子图表就像更改设置一样简单，我认为上述任何一种方法都是应该做的--保持简单。

Answer 2

当您说要使用<canvas>时，我不知道为什么要在模板中使用<radar-chart>，但我想这就是问题所在。

在角度上没有指令的抽象。您可以对指令的控制器使用继承，但不能抽象链接函数和指令。

您可以在模板中使用其他角指令作为指令，我认为这就是您所缺少的。

angular
    .module('myApp')
    .directive('userRadarChart', function () {
        return {
            restrict: 'E',
            template: '<radar-chart data="{{data}}" labels="[\'Motivation\', \'Perseverance\']" options="{}" colours="[\'Yellow\']"></radar-chart>',
            scope: {
                motivation: '@',
                perseverance: '@'
            },
            link: function ($scope, $element, $attrs) {
                $scope.$watchGroup(['motivation','perseverance'],function(values) {
                    $scope.data = values;
                });
            }
    }
});

请记住，在可能的情况下，您应该尝试使用观察者。如果激励和毅力的价值被绑定到一个角度的表达，那么图表将不会更新，如果它们改变。

使用$scope.$watchGroup，每当值发生变化时，都会使用一个值数组执行回调函数。当使用@将属性分配给作用域时，它们已经存在于作用域中。所以您不应该使用$attrs.motivation来访问它们。

我把你的静态参数移到模板上了。尝试在模板中保持样式和显示，在代码中保持业务逻辑。让它更容易维护。