AngularJS how to pass data from one controller to different directives

Question

I am not sure whether I can do like this or there is a better way. I need someone to guide me.

I created two template using directive (both directives in the same page). Let say

• directiveVideo for display videos
• directivePhoto for display photos

Then I have a controller. this controller requests two different data, videos and photos. My question is, how can I pass the video data to display in directiveVideo and photo data to directivePhoto

Answer 1

Your question is incredibly vague, so I'll give an equally vague answer. If you want something more specific, you'll need to edit your question to include some code - preferably in a Plunker.

If your controller declares two scope vars, videos and photos, then you can simply pass those as attributes to your directives:

<div photos="photos"></div>
<div videos="videos"></div>

And you can read this in from your directive. Assuming you have an isolate scope:

scope: { photos: '=' }

Otherwise:

scope: true,
link: function ( scope, element, attrs ) {
  attrs.$observe( 'photos', function ( val ) {
    $scope.photos = val;
  });
}

And your template can access it however it needs to:

<ul>
  <li ng-repeat="photo in photos"><img ng-src="{{photo.url}}" /></li>
</ul>