Angular Directive scope inheritance inside attributes

Question

AngularJS newbie question. I want to write a plotting directive. Let's say I have this:

app.controller("dirCtrl", function($scope) {
    $scope.datapoints = [
        { x: 1.169, y: 1.810, label: "Point-0" },
        { x: 1.585, y: 0.508, label: "Point-1" },
        { x: 7.604, y: 2.735, label: "Point-2" },
        ...
        ];
});

Then I would like my directive to be like this:

<my-plot xLabel="Some Numbers" xUnits="grams"
                    yLabel="Some Values"  yUnits="mm"
                    data="datapoints" />

My problem is that "datapoints" does not get bound to $scope.datapoints I've also tried writing the attribute as data="{{datapoints}}" without success either.

My directive definition, in its own module:

angular.module("plotDirectives", [])
  .directive("myPlot", function() {
     return {
          restrict: "E",
          scope: true,  //'cos I want access to the controller's scope right?
          link: function(scope, iElement, iAttrs) {
            /* would draw fancy chart if I only could access
               the datapoints in the 'data' attribute */
          };
    });

What am I missing or what would be a better approach for my directive to get to the controller's scope datapoints? Thank you.

For future reference, I think if you used the alias syntax on your controller, you wouldn't have had the issue. By avoiding injecting $scope directly, it removes the issues with it. Check this out. — U r s u s
– U r s u s, Commented Jan 30, 2015 at 11:19
I don't think the alias syntax would have helped in this instance as it was more of a misunderstanding on my part. But the link is useful, contains information I didn't know of and will be handy later on. Thank you. — baldTop
– baldTop, Commented Jan 30, 2015 at 13:39

tomaoq · Accepted Answer · 2015-01-29 13:53:49Z

2

You can use an isolate scope in your directive.

Here's an example from AngularJS official documentation.

angular.module('docsIsolateScopeDirective', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
  $scope.igor = { name: 'Igor', address: '123 Somewhere' };
}])
.directive('myCustomer', function() {
  return {
    restrict: 'E',
    scope: {
      customerInfo: '=info'
    },
    templateUrl: 'my-customer-iso.html'
  };
});


<div ng-controller="Controller">
  <my-customer info="naomi"></my-customer>
  <hr>
  <my-customer info="igor"></my-customer>
</div>

If you use scope: true in your directive (which is most of the time a bad practice, as it makes the directive very tight coupled to the controller), you don't need to set attributes on the DOM for your directive, just use scope.yourVariableName to access variables in the controller by inheritance.

edited Jan 29, 2015 at 13:53

answered Jan 29, 2015 at 13:48

tomaoq

3,0762 gold badges20 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

baldTop Over a year ago

I was aware of that example but hadn't tried to access the variables from the link function. Just did it and it works. It works with my points list too. Thank you.

Collectives™ on Stack Overflow

Angular Directive scope inheritance inside attributes

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related