[英]Angularjs pass function from Controller to Directive (or call controller function from directive) - with parameters
My question is very simple, I just want to pass a controller function to directive. 我的问题很简单,我只想将控制器函数传递给指令。 In other terms, I just want to call a controller function from directive.
换句话说,我只想从指令中调用控制器函数。
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>
Can anybody please help me where I'm going wrong here. 谁能帮我在哪里我错了。 I believe it has got something to do with $scope inheritance or convention.
我相信它与$ scope继承或约定有关。
I know I am doing some petty mistake here, just that I am can't figure it in the rush I am. 我知道我在这里犯了一些小错误,只是因为我赶不上忙才知道。
Thank you very much for you help! 非常感谢您的帮助!
You're almost there. 你快到了。 The syntax for passing params is a little strange.
传递参数的语法有点奇怪。
In your HTML, use something like 在您的HTML中,使用类似
<div my-picker jsonadd="fnItemsOnAdded(items)"...
and in your directive... 在你的指令中
$scope.jsonadd({items: $scope.ngModel.SelectedKeys})
The keys in the object passed to the isolate scope function ( jsonadd
, jsoncancel
) need to match the argument names used in the attribute. 传递给隔离作用域函数(
jsonadd
和jsoncancel
)的对象中的键需要与属性中使用的参数名称匹配。
I don't know where SelectedKeys
comes from but I assume you've just omitted something for brevity. 我不知道
SelectedKeys
来源,但我想为了简洁起见,您已经省略了一些内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.