angularjs - 如何编写指令来设置另一个指令的属性？

Question

我见过类似的问题，但我无法将它们应用于我的情况，所以我很感激你能给我的任何帮助。我正在使用 angular-nvd3 指令在许多不同的控制器中制作 4 种不同类型的图表。现在，我将它们添加到每个视图和控制器中，如他们的基本示例所示。

angular.module('myApp', ['nvd3'])
   .controller('myCtrl', function('$scope'){
       $scope.options = { /* JSON data */ };
       $scope.data = { /* JSON data */ }
    })

在html中：

<div ng-app='myApp'>
  <div ng-controller='myCtrl'>
    <nvd3 options='options' data='data'></nvd3>
  </div>
</div>

我$scope.options一遍又一遍地使用相同的 4 个版本，所以我想编写一组指令，允许我用 HTML 编写它（并且只$scope.data在控制器中定义）。

<nvd3 typeA data='data'></nvd3>

我已经看到了如何添加新属性并将它们指向范围变量的示例，但是如何将属性指向固定的 JSON 对象？

Answer 1

You can create a directive that wraps the nvd3 directive and adds the options data like this

html:

<typea data='data'></typea>

javascript:

angular.module('myApp').directive('typea', function() {
  return {
      scope : {
          data:"="
      },
      restrict: 'E',
      template: "<nvd3 options='options' data='data'></nvd3>"  ,
      link: function($scope) {
          $scope.options = {  /* JSON data */ }
      }
  };
});