如何通過PARAMS到`$ scope`功能從指令

Question

萬一要是我錯了，給我正確的方式去做

我試圖從ng-repeat通過index和item名。它沒有解決某個問題。任何人都可以幫我排序嗎？

這裏是代碼：

<div class="wrapper" ng-app="myApp"> 
     <div class="content" ng-controller="main"> 
     <h2 ng-class="active">{{activeItem.name}}</h2> 
     <sub-title item='item' index=$index ng-repeat="item in items" change="changeItem()"></sub-title> 
    </div> 
    </div> 

// Code goes here 

var app = angular.module('myApp', []); 

app.controller('main', ["$scope", function($scope) { 
    console.log("cotroller") 
    $scope.items = [{"name":'one'},{"name":'two'},{"name":'three'}, {"name":'four'},{"name":'five'},{name:'six'}]; 
    $scope.activeItem = $scope.items[0]; 
    $scope.queueItems = $scope.items.splice(0,1); 

    $scope.changeItem = function (index, item) { 
    console.log("change now", index, item.name); //not consoling 
    } 

}]); 

app.directive("subTitle", function() { 

    return { 
     replace:true, 
     scope:{ 
     change :'&', 
     item : '=', 
     index:'=' 
     }, 
     template : '<h2>{{item.name}} {{index}}</h2>', 
     link : function (scope, element, attrs) { 
     var num = scope.index; 
     element.on('click', function() { 
      scope.change(num, item); 
     }) 
     } 
    } 

}) 

LIVE DEMO

Answer 1

您可以使用$ rootScope $廣播的呼叫控制器的功能

var app = angular.module('myApp', []); 

app.controller('main', ["$scope", function($scope) { 
    console.log("cotroller") 
    $scope.items = [{"name":'one'},{"name":'two'},{"name":'three'}, {"name":'four'},{"name":'five'},{name:'six'}]; 
    $scope.activeItem = $scope.items[0]; 
    $scope.queueItems = $scope.items.splice(0,1); 

    $scope.changeItem = function (index, item) { 
    console.log("change now", index, item.name); //not consoling 
    } 
$scope.change=function(){ 
//your logic 
} 
$rootScope.$broadcast('msgFromDirective',function(evnt,data){ 
$scope.change(data.Num,data.Item); 
}); 
}]); 

指令

app.directive（。 「subTitle」，函數（$ rootScope）{

return { 
    replace:true, 
    scope:{ 
    change :'&', 
    item : '=', 
    index:'=' 
    }, 
    template : '<h2>{{item.name}} {{index}}</h2>', 
    link : function (scope, element, attrs) { 
    var num = scope.index; 
    element.on('click', function() { 
    $rootScope.$broadcast('msgFromDirective',{Num:num,Item:item});    
// scope.change(num, item); 
    }) 
    } 
} 

}）

Answer 2

在這種情況下，你應該通過=結合傳遞一個函數引用，否則你不能夠從指令內部參數運行外部函數。因此，改變你的代碼了一下，像這樣：

app.directive("subTitle", function() { 

    return { 
     replace:true, 
     scope:{ 
     change :'=', 
     item : '=', 
     index:'=' 
     }, 
     template : '<h2>{{item.name}} {{index}}</h2>', 
     link : function (scope, element, attrs) { 
     var num = scope.index; 
     element.on('click', function() { 
      scope.change(num, scope.item); 
      scope.$apply(); 
     }) 
     } 
    } 

}) 

請記住，如果你正在運行一個像這樣的功能（通過DOM事件觸發它，並通過角不是），該框架不知道你剛剛運行它的事實。因此，你必須在年底觸發角的消化循環，因此scope.$apply();

（我也固定的崇敬item，因爲它是在scope對象，這樣scope.change(num, scope.item)代替scope.change(num, item聲明）

然後在模板聲明它是這樣的：

​​

這裏的工作代碼：http://plnkr.co/edit/ECu9n0BS4XSqs1756h0v?p=preview

Answer 3

在你的html pass函數參考中沒有pamentalhesis。

​​

因爲我們傳遞的函數參考，scope.change()不會調用函數，但返回changeItem功能。

scope.change(); 

以上調用將返回：

function (index, item) { 
    console.log("change now", index, item.name); //not consoling 
} 

所以，你必須首先做一個調用來檢索功能，比調用的實際功能。

scope.change()(scope.num, scope.item); // calls changeItem function 

入住這PLUNKER，我編輯了自己的代碼。