Passing data from one directive to another in AngularJS

Question

I have two directives, and I intent to populate an ng-repeat from the second one with a $http query made in the first one. How could I pass this data from one to the other?

Here's the code:

var app = angular.module('myApp');


app.directive('release', ['musicInfoService',
  function(musicInfoService) {

    return {
      restrict: 'E',
      scope: {
        release: '=',
        artist: '='
      },
      template: '<div class="release">' +
        '<div class="wrapper"><img class="img-responsive" ng-src="{{imageSrc}}"/><div id="text" ng-click="getVersions(release)"></div></div>{{release.title | characters:65}}' +
        '</div>',
      replace: false,
      link: function(scope, elem, attr) {
        var defaultImage = 'img/record-default.png';
        scope.imageSrc = defaultImage;
        musicInfoService.getAlbumInfo(scope.artist.name, scope.release.title)
          .success(function(data) {
            if (data.error) return;

            var image = data.album.image[2],
              imageUrl = defaultImage;

            if (image['#text'] !== '') {
              imageUrl = image['#text'];
            }

            scope.imageSrc = imageUrl;
          });

        scope.getVersions = function(release) {

          if (angular.isUndefined(release)) return;

          musicInfoService.getReleaseVersions(release.id)
            .success(function(data) {
              release.versions = data.versions;
            });
        };
      }
    };
  }
]);

app.directive('theDirective', ['musicInfoService',
  function(musicInfoService) {
  return {
    restrict: 'A',
    scope: { position: '@', last: '@', release: '=',
        artist: '=' },
    link: function(scope, element, attrs) {

      element.bind('click', function() {

        // Highlight clicked element
        angular.element(document.querySelector('.clicked')).removeClass('clicked');
        element.addClass('clicked');

        // Create the collapse element or select existing one
        var collapseQuery = document.querySelector('#collapse');
        var collapse = collapseQuery === null ?
          angular.element('<div id="collapse" class="col-xs-12"><ul><li>{{release.title}}</li><li ng-repeat="version in release.versions | filter:\'!mp3\' | filter:\'!wav\' ">{{version.format}}</li></ul></div>') :
          angular.element(collapseQuery);

        // Based on the position of the clicked element calculate the rounded number up to the nearest multiple of four
        var calculatedPosition = Math.ceil(scope.position / 4) * 4;

        // Get the element at the calculated position or the last one
        var calculatedQuery = document.querySelector('[position="' + calculatedPosition + '"]');
        if (calculatedQuery === null) calculatedQuery = document.querySelector('[last="true"]');;

        var calculatedElement = angular.element(calculatedQuery);

        // Insert the collapse element after the element at the calculated position
        calculatedElement.after(collapse);

        // Highlight the calculated element
        angular.element(document.querySelector('.calculated')).removeClass('calculated');
        calculatedElement.addClass('calculated');
      });

      scope.$on('$destroy', function() {
        element.unbind('click');
      });
    }
  };
}
]);

The first directive makes this call:

      scope.getVersions = function(release) {

          if (angular.isUndefined(release)) return;

          musicInfoService.getReleaseVersions(release.id)
            .success(function(data) {
              release.versions = data.versions;
            });
        };

And I need to use the results here, in the second directive:

var collapseQuery = document.querySelector('#collapse');
    var collapse = collapseQuery === null ?
      angular.element('<div id="collapse" class="col-xs-12"><ul><li>{{release.title}}</li><li ng-repeat="version in release.versions | filter:\'!mp3\' | filter:\'!wav\' ">{{version.format}}</li></ul></div>') :
      angular.element(collapseQuery);

Any thoughts?

EDIT: I've created a Plunker to illustrate the problem.

You could put release on the parent scope and bind it to both directives or you could store the data in a service and inject it into both directives. — Nick
– Nick, Commented Mar 24, 2014 at 15:13

Community · Accepted Answer · 2017-05-23 12:28:48Z

1

I would recommend to use factory to create your service which holds the shared data. This service is then injected into both of your directives as a dependency.

app.factory("sharedDataService", function() {
            return {
                yourData: "whatever"
            };
        });

see this :

great SO answer and example here: https://stackoverflow.com/a/13482919/36546
Video here: https://egghead.io/lessons/angularjs-sharing-data-between-controllers

hope this helps

UPDATE

I created a plunker to illustrate what I mean

edited May 23, 2017 at 12:28

CommunityBot

11 silver badge

answered Mar 24, 2014 at 15:37

PeterFromCologne

10.5k10 gold badges43 silver badges50 bronze badges

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

3 Comments

Eric Mitjans Over a year ago

I've created a Plunker (see EDIT). Where would I have to create the factory? I'm a bit confused cause there're multiple services (also dependent one from another) and I wouldn't know how to adapt it. Got lots of help to get here and now there're pieces of code I don't fully understand...

PeterFromCologne Over a year ago

Added a Plunkr plnkr.co/edit/LUNCjOSWSaVf0F6uT6Dd?p=preview and updated my answer.

Eric Mitjans Over a year ago

Peter, I implemented it but I get a "TypeError: Cannot set property 'shared' of undefined" error. The code is in the directives.js of this plunker. Care to take a look? Dunno what might I have missed..

Collectives™ on Stack Overflow

Passing data from one directive to another in AngularJS

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related