AngularJS directives accessing the same scope object - avoid overwrite

Question

I am trying to wrap an angular object into a template which I should then be able to instantiate by using a directive. In this case each directive is a type of widget.

The problem comes from the fact that the directives I am writing are based on the same type, so when instantiating a directive I am keeping a track of the widget object in the global scope. I have something in the lines of:

.directive('lineChart', ['$interval', '$compile', 'widgetDataService',
    return {
            restrict: 'E',
            scope: false,
            templateUrl: 'templates/lineChart.html',
            link: function(scope, elm, attrs) {
                var obj = {
                    guid: attrs['guid'],
                    datasource: undefined
                }

                scope.widgets.push(obj)
...

So then in the template I can do:

...
k-data-source="widgets[{{index}}].datasource"
...

The idea here being that consequent uses of the directive would result in sequentially initialised templates - and therefore each template would get its respective index. However this doesn't work. If I use a directive more than once all instantiated templates get the last index, which probably means that angular is separating the instantion in different stages.

Is there a way to use a global object to keep track of the underlying objects of the directives, but still let them have different indexes passed in at runtime?

Jens Neubauer · Accepted Answer · 2014-08-18 12:52:04Z

1

You can define and set a variable in the factory function of the directive (as this is only called once) and then increment it during the link phase:

.directive('lineChart', ['$interval', '$compile', 'widgetDataService',
  function($interval, $compile, widgetDataService) {
    var index = 0;  //initialize index
    return {
        restrict: 'E',
        scope: true,
        templateUrl: 'templates/lineChart.html',
        link: function(scope, elm, attrs) {
            var currentIndex = index++;  //increment on linking
            scope.index = currentIndex;
            var obj = {
                guid: attrs['guid'],
                datasource: undefined
            }

            scope.$parent.widgets[currentIndex] = obj;

            scope.$on('$destroy', function () {
               index--;
            });
...

In the view:

k-data-source="$parent.widgets[{{index}}].datasource"

edited Aug 18, 2014 at 12:52

answered Aug 15, 2014 at 14:09

Jens Neubauer

1,0901 gold badge13 silver badges24 bronze badges

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

6 Comments

Nasco Bozhkov Over a year ago

Using widgets[{{$$index}}].datasource produces an $parse error. link Why the double $-sign?

Nasco Bozhkov Over a year ago

It produces a parse error because ` $$index ` does not resolve to anything. I've double chacked my code. It should be correct. Any ideas?

Jens Neubauer Over a year ago

Sorry, my mistake, it should only be $index. I was thinking of $$hashkey.

Nasco Bozhkov Over a year ago

I tried that too but it didn't work either. I'll be able to test again on Monday. Any ideas?

Jens Neubauer Over a year ago

Wait, you want to access the index initialized by the directive? That won't work. If you set the index in the parent scope (which you do by setting scope: false), each subsequent instantiation of the directive will overwrite it. I will edit my answer.

|

Collectives™ on Stack Overflow

AngularJS directives accessing the same scope object - avoid overwrite

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related