AngularJS:如何将数据从指令传递给控制器​​函数 [英] AngularJS : How to pass data from directive to controllers function

问题描述

我正在尝试将来自指令的一些数据传递到我的控制器中的函数 addTrackFromPicker 中.

$scope.addTrackFromPicker = 函数(消息){console.log("addTrackFromPicker", message);};

这是我的指令中的内容

dir.directive('youtubeList', function($http, $timeout, YT_event){返回 {限制:'E'，范围: {搜索:'='，拨号:'&'},templateUrl: 'youtube-list.html',...

这里我想从我的模板中调用控制器函数并将其作为参数传递item.id.$t:

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

但我不知道如何将它传递到我的标签中

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

我也试过 $parent.addTrackFromPicker 但没用

解决方案

为了从指令中传递数据，您需要这样做:

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

然后，在您的模板中:

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

如果其他内容更适合您的情况，您可以使用 data 以外的参数名称".请参阅 Angular 关于 scope 的文档有关其工作原理的详细信息.

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

解决方案

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.

这篇关于AngularJS:如何将数据从指令传递给控制器​​函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！