Passing data from one directive to another in AngularJS -
i have 2 directives, , intent populate ng-repeat second 1 $http query made in first one. how pass data 1 other?
here's 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 collapse element or select existing 1 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 position of clicked element calculate rounded number nearest multiple of 4 var calculatedposition = math.ceil(scope.position / 4) * 4; // element @ calculated position or last 1 var calculatedquery = document.queryselector('[position="' + calculatedposition + '"]'); if (calculatedquery === null) calculatedquery = document.queryselector('[last="true"]');; var calculatedelement = angular.element(calculatedquery); // insert collapse element after element @ calculated position calculatedelement.after(collapse); // highlight calculated element angular.element(document.queryselector('.calculated')).removeclass('calculated'); calculatedelement.addclass('calculated'); }); scope.$on('$destroy', function() { element.unbind('click'); }); } }; } ]); the first directive makes call:
scope.getversions = function(release) { if (angular.isundefined(release)) return; musicinfoservice.getreleaseversions(release.id) .success(function(data) { release.versions = data.versions; }); }; and need use results here, in 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 plunker illustrate problem.
i recommend use factory create service holds shared data. service injected both of directives dependency.
app.factory("shareddataservice", function() { return { yourdata: "whatever" }; }); see :
- great answer , example here: https://stackoverflow.com/a/13482919/36546
- video here: https://egghead.io/lessons/angularjs-sharing-data-between-controllers
hope helps
update
Comments
Post a Comment