Angularjs传递函数从控制器到指令（或指令呼叫控制器功能） - 与参数

Question

我的问题很简单，我只是想通过一个控制器功能指令。换句话说，我只是想从指令中调用一个控制器函数。

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

 
myapp.controller('myCtrl',['$scope','$timeout',function($scope,$timeout){ 
 
    
 
    $scope.fnItemsOnAdded = function(itms){ 
 
    alert('Hi, I am in controller add. Here are your Items: '+JSON.stringify(itms)); 
 
    } 
 
    $scope.fnItemsOnCancel = function(itms){ 
 
    alert('Hi, I am in controller cancel. Here are your Items: '+JSON.stringify(itms)); 
 
    } 
 
    
 
    }]); 
 

 
myapp.directive('myPicker',['$timeout',function($timeout){ 
 
    
 
    
 
    var dtv={}; 
 
    
 
    dtv.template = '<li ng-repeat="itm in ngModel.ItemsList"><label><input type="checkbox" ng-model="itm.IsSelected" />{{itm.Name}}</label></li>';  
 
    dtv.template += '<a href="javascript:void(0)" ng-click="addItems()" class="addItems">add items</a>'; 
 
    dtv.template += '<a href="javascript:void(0)" ng-click="cancelItems()" class="cancel">cancel</a>'; 
 
    
 
    dtv.scope = { postUrl: '@', jsonadd: '&', jsoncancel: '&' }; 
 
    
 
    dtv.restrict = 'A'; 
 
    
 
dtv.link = function($scope,elm,attrs){ 
 
    
 
    $scope.ngModel={}; 
 
    $scope.ngModel.SelectedKeys=[]; 
 
    
 
    $timeout(function(){ 
 
    $scope.ngModel.ItemsList = [ 
 
    {Name:"Item1",IsSelected:false}, 
 
     {Name:"Item2",IsSelected:false}, 
 
     {Name:"Item3",IsSelected:false}, 
 
     {Name:"Item4",IsSelected:true}, 
 
     {Name:"Item4",IsSelected:false}, 
 
    ]; 
 
    
 
    },100); 
 
    
 
    $scope.addItems = function(){ 
 
     
 
     //Dummy logic to update SelectedKeys 
 
     for(var idx =0;idx<$scope.ngModel.ItemsList.length;idx++){ 
 
     if($scope.ngModel.ItemsList[idx].IsSelected){ 
 
     $scope.ngModel.SelectedKeys.push($scope.ngModel.ItemsList[idx]); 
 
     } 
 
     } 
 
     
 
    alert("i'm in directive add. Lemme call parent controller"); 
 
    $scope.jsonadd($scope.ngModel.SelectedKeys); 
 
    } 
 
    
 
    $scope.cancelItems = function(){ 
 
    alert("i'm in directive cancel. Lemme call parent controller"); 
 
    $scope.jsonadd($scope.ngModel.SelectedKeys); 
 
    } 
 
    
 
    } 
 
    
 
    
 
    return(dtv); 
 
    
 
    
 
    }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="myapp" ng-controller="myCtrl"> 
 

 
<div class="jqmWindow" id="myPickListDiv" my-picker jsonadd="fnItemsOnAdded" jsoncancel="fnItemsOnCancel" post-url="/myurl"></div> 
 
    
 
    </div>

• 我试图this approach但它不会触发功能，不抛出任何错误要么。
• 我试图this和this的方法 - 它返回一个错误$申请正在进行中。

任何人可以帮我，我要去哪里错在这里。我认为它与$ scope继承或约定有关。

我知道我在这里做了一些小错误，只是我在我赶弄不明白。

非常感谢您的帮助！

Answer 1

你快到了。传递参数的语法有点奇怪。

在你的HTML，使用类似

<div my-picker jsonadd="fnItemsOnAdded(items)"... 

，并在你的指令......

$scope.jsonadd({items: $scope.ngModel.SelectedKeys}) 

的钥匙，传递给分离范围功能（jsonadd，jsoncancel）对象需要匹配属性中使用的参数名称。

我不知道在哪里SelectedKeys来源于但我以为你只是省略的东西简洁。