Jan Omacka Jan Omacka - 1 year ago 121
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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download