Jan Omacka Jan Omacka - 4 months ago 14
AngularJS Question

AngularJS : How to pass data from directive to controllers function

I'm trying to pass some data from directive into a function

addTrackFromPicker
in my controller.

$scope.addTrackFromPicker = function (message) {
console.log("addTrackFromPicker", message);
};


Here what I have in my directive

dir.directive('youtubeList', function($http, $timeout, YT_event){
return {
restrict: 'E',
scope: {
search: '=',
dial: '&'
},
templateUrl: 'youtube-list.html',
...


Here I want to call controllers function from my template and pass it
item.id.$t
as argument:

<div class="media list-group-item" ng-repeat="item in entries">
<a type="button" ng-click="dial(item.id.$t)">
<img ng-src="{{item.media$group.media$thumbnail[0].url}}">
</a>



But I don't know how to pass it into my tag

<youtube-list search="search" dial="addTrackFromPicker(???)"></youtube-list>


I also tried
$parent.addTrackFromPicker
but it didnt work

Answer

In order to pass in your data from your directive, you will need to do it like this:

<youtube-list search="search" dial="addTrackFromPicker(data)"></youtube-list>

Then, in your template:

<div class="media list-group-item" ng-repeat="item in entries">
    <a type="button" ng-click="dial({data: item.id.$t})">
        <img  ng-src="{{item.media$group.media$thumbnail[0].url}}">
    </a>
</div>

You can use an "argument name" other than data if something else makes more sense for your situation. See Angular's documentation on scope for detailed info on how this works.