AngularJS에서 하나의 지시문에서 다른 지시문으로 데이터 전달

Question

두 개의 지시문이 있으며 첫 번째 지시문에서 $ http 쿼리를 사용하여 두 번째 지시문에서 ng-repeat를 채 웁니다. 이 데이터를 다른 사람에게 어떻게 전달할 수 있습니까?

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'); 
     }); 
    } 
    }; 
} 
]); 

첫 번째 지침이 호출한다 : 여기

코드의

 scope.getVersions = function(release) { 

      if (angular.isUndefined(release)) return; 

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

을 그리고 두 번째 지시에서, 여기에 결과를 사용해야합니다

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); 

이견있는 사람?

수정 : 문제를 설명하기 위해 Plunker을 만들었습니다.

Answer 1

나는 가 공유 데이터를 보유하고 서비스를 만들 수 공장를 사용하는 것이 좋습니다. 이 서비스는 종속성으로 두 지시문 모두에 주입됩니다.

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

이 참조 :

• 큰 SO에 답하고 여기 예 : https://stackoverflow.com/a/13482919/36546
• 비디오 여기 : https://egghead.io/lessons/angularjs-sharing-data-between-controllers

희망이 도움이

UPDATE

I created a plunker to illustrate what I mean