How do I write a directive to set attributes of another directive?

Question

I've seen similar questions, but I'm having trouble applying them to my situation, so I appreciate any help you can give me. I'm using the angular-nvd3 directive to make 4 different types of charts within many different controllers. Right now, I'm adding them to each view & controller as shown in their basic example.

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

and in html:

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

I'm using the same 4 versions of $scope.options over and over again, so I'd like to write a set of directives that would allow me to write this in HTML instead (and only define $scope.data in the controllers).

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

I've seen examples of how to add new attributes and point them to scope variables, but how do I point the attribute to a fixed JSON object?

what is `typeA`? Is it a directive that applies a certain predefined set of options ? — New Dev, Apr 11 '15 at 17:14

score 1 · Answer 1 · answered Apr 11 '15 at 18:25

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

How do I write a directive to set attributes of another directive?

1 Answers1