我的问题很简单,我只想将 Controller 函数传递给指令。换句话说,我只想从指令调用 Controller 函数。
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方法 - 它返回错误 $apply 已在进行中。
任何人都可以帮我解决我这里出错的地方吗?我相信这与 $scope 继承或约定有关。
我知道我在这里犯了一些小错误,只是我在匆忙中无法弄清楚。
非常感谢您的帮助!
最佳答案
你就快到了。传递参数的语法有点奇怪。
在 HTML 中,使用类似的内容
<div my-picker jsonadd="fnItemsOnAdded(items)"...
在你的指令中......
$scope.jsonadd({items: $scope.ngModel.SelectedKeys})
传递给隔离作用域函数的对象中的键(jsonadd
、jsoncancel
)需要与属性中使用的参数名称匹配。
我不知道 SelectedKeys
来自哪里,但我假设您只是为了简洁而省略了一些内容。
关于javascript - Angularjs 将函数从 Controller 传递到指令(或从指令调用 Controller 函数) - 带参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28666374/