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

看到这个：

很好的回答和示例：https://stackoverflow.com/a/13482919/36546
视频：https://egghead.io/lessons/angularjs-sharing-data-between-controllers

希望这会有所帮助

<强>更新

I created a plunker to illustrate what I mean

在AngularJS中将数据从一个指令传递到另一个指令

1 个答案: