由网友(就是我这一生最)分享简介：我的问题很简单，我只是想传递一个控制器功能指令。在其他方面，我只是想打电话从一个指令控制器功能。 \r\r VAR的myapp = angular.module（'MyApp的'，[]）;\r\rmyapp.controller（'myCtrl'，['$范围，$超时'，函数（$范围，$超时）{\r  \r  $ sc...

我的问题很简单，我只是想传递一个控制器功能指令。在其他方面，我只是想打电话从一个指令控制器功能。

rr

VAR的myapp = angular.module（'MyApp的'，[]）;rrmyapp.controller（'myCtrl'，['$范围，$超时'，函数（$范围，$超时）{r  r  $ scope.fnItemsOnAdded =功能（ITMS）{r     警报（你好，我是在控制器添加下面是你的项目：'+ JSON.stringify（ITMS））;r    }r    $ scope.fnItemsOnCancel =功能（ITMS）{r     警报（你好，我是在控制器取消这是你们的项目：'+ JSON.stringify（ITMS））;r    }r  r  }]）;rrmyapp.directive（'myPicker'，['$超时'，函数（$超时）{r  r  r  变种DTV = {};r  r  dtv.template ='＆LT;李NG重复=ITM在ngModel.ItemsList＆GT;＆LT;标签＆gt;＆LT;输入类型=复选框NG模型=itm.IsSelected/>{{itm.Name }}＆LT; /标签＆gt;＆LT; /李＆GT;';r  dtv.template + ='＆LT; A HREF =JavaScript的：无效（0）NG点击=为addItems（）级=为addItems＆gt;添加项目＆lt; / A＆GT;';r  dtv.template + ='＆LT; A HREF =JavaScript的：无效（0）NG点击=cancelItems（）级=取消＆GT;取消＆LT; / A＆GT;';r  r  dtv.scope = {postUrl：'@'，jsonadd：'和;'，jsoncancel：'和;' };r  r  dtv.restrict ='A';r  rdtv.link =功能（$范围，榆树，ATTRS）{r  r  $ scope.ngModel = {};r  $ scope.ngModel.SelectedKeys = [];r  r  $超时（函数（）{r    $ scope.ngModel.ItemsList = [r    {名称：项目1，IsSelected：假}，r      {名称：项目2，IsSelected：假}，r      {名称：项目3，IsSelected：假}，r      {名称：ITEM4IsSelected：真正}，r      {名称：ITEM4IsSelected：假}，r    ];r    r    }，100）;r  r    $ scope.addItems =功能（）{r      r      //虚逻辑更新SelectedKeysr      为（VAR IDX = 0; idx的＆下; $ scope.ngModel.ItemsList.length; IDX ++）{r      如果（$ scope.ngModel.ItemsList [IDX] .IsSelected）{r      $ scope.ngModel.SelectedKeys.push（$ scope.ngModel.ItemsList [idx的]）;r      }r      }r      r    警报（我在添加指令，让我再调用父控制器。）;r    $ scope.jsonadd（$ scope.ngModel.SelectedKeys）;r    }r  r    $ scope.cancelItems =功能（）{r    警报（我在指令取消电话让我和父母控制。）;r    $ scope.jsonadd（$ scope.ngModel.SelectedKeys）;r    }r    r  }r  r  r  返回（DTV）;r  r  r  }]）;

r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js"></script>rr＆LT; D​​IV NG-应用程序=的myappNG控制器=myCtrl＆GT;rr＆LT; D​​IV CLASS =jqmWindowID =myPickListDiv我选取器jsonadd =fnItemsOnAddedjsoncancel =fnItemsOnCancel后URL =/ myurl＆GT;＆LT; / DIV＆GT;r  r  ＆LT; / DIV＆GT;

rrr

我曾尝试这种做法但它不会触发功能，没有按T抛出任何错误或者我试过this和这种的方法 - 它返回一个错误$申请正在进行中

任何人都可以帮我，我要去哪里错在这里。我相信这已经得到的东西做$范围继承或约定。

我知道我在这里做了一些小错误，只是我在我赶不能看着办吧。

非常感谢您的帮助！

解决方案

您快到了。传递PARAMS的语法是有点怪怪的。

在你的HTML，使用类似

 ＆LT; D​​IV我选取器jsonadd =fnItemsOnAdded（项目）... 

和在你的指令...

  $ scope.jsonadd（{项目：$ scope.ngModel.SelectedKeys}） 

在传递到分离范围函数的对象的键（ jsonadd ， jsoncancel ）需要匹配参数在属性使用的名称。

我不知道在哪里 SelectedKeys 源于但我相信你刚刚省略的东西为简洁。

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>

I have tried this approach but it doesn't trigger the function, doesn't throw any error either. I tried this and this approach - it returns an error $apply is already in progress.

Can anybody please help me where I'm going wrong here. I believe it has got something to do with $scope inheritance or convention.

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

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

I don't know where SelectedKeys comes from but I assume you've just omitted something for brevity.