AngularJS：如何将数据从指令传递给控制器​​函数

Question

我试图将指令中的一些数据传递到控制器中的函数addTrackFromPicker。

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

这是我在指令中的内容

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

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

<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>

但我不知道如何将其传递给我的标签

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

我也试过$parent.addTrackFromPicker，但它没有用

Answer 1

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

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

然后，在您的模板中：

<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>

如果其他内容对您的情况更有意义，您可以使用data以外的“参数名称”。有关其工作原理的详细信息，请参阅Angular's documentation on scope。

Answer 2

隔离范围：将一些值从父范围传递给指令

AngularJS提供了3种类型的前缀

1. “@”（文本绑定/单向绑定）
2. “=”（直接模型绑定/双向绑定）
3. “＆安培;” （行为绑定/方法绑定）

所有这些前缀都接收来自指令元素属性的数据。

 class="directive"

 name="{{name}}"

 color="color"

当指令在scope属性中遇到前缀时，它将在指令的html元素上查找属性（具有相同的属性名称）

 scope : {    
  name: "@"    
 }

我已关注此链接http://jsfiddle.net/shidhincr/pJLT8/10/light/