angularJS:如何在父范围内调用子范围函数

如何从父范围调用子范围中定义的方法?

function ParentCntl() { // I want to call the $scope.get here } function ChildCntl($scope) { $scope.get = function() { return "LOL"; } } 

http://jsfiddle.net/wUPdW/

您可以使用父母给孩子的$broadcast

 function ParentCntl($scope) { $scope.msg = ""; $scope.get = function(){ $scope.$broadcast ('someEvent'); return $scope.msg; } } function ChildCntl($scope) { $scope.$on('someEvent', function(e) { $scope.$parent.msg = $scope.get(); }); $scope.get = function(){ return "LOL"; } } 

工作小提琴: http : //jsfiddle.net/wUPdW/2/

更新 :还有一个版本,耦合度较低,可testing性较高:

 function ParentCntl($scope) { $scope.msg = ""; $scope.get = function(){ $scope.$broadcast ('someEvent'); return $scope.msg; } $scope.$on('pingBack', function(e,data) { $scope.msg = data; }); } function ChildCntl($scope) { $scope.$on('someEvent', function(e) { $scope.$emit("pingBack", $scope.get()); }); $scope.get = function(){ return "LOL"; } } 

小提琴: http : //jsfiddle.net/uypo360u/

让我build议另一个解决scheme:

 var app = angular.module("myNoteApp", []); app.controller("ParentCntl", function($scope) { $scope.obj = {}; }); app.controller("ChildCntl", function($scope) { $scope.obj.get = function() { return "LOL"; }; }); 

代码less,使用原型inheritance。

普拉克

孩子初始化时在父母上注册孩子的function。 为了清楚起见,我使用了“as”符号。

模板

 <div ng-controller="ParentCntl as p"> <div ng-controller="ChildCntl as c" ng-init="p.init(c.get)"></div> </div> 

CONTROLLERS

 ... function ParentCntl() { var p = this; p.init = function(fnToRegister) { p.childGet = fnToRegister; }; // call p.childGet when you want } function ChildCntl() { var c = this; c.get = function() { return "LOL"; }; } 

“但是”,你说,“ ng-init 不应该用这种方式 !”。 嗯,是的,但是

  1. 该文件不解释为什么不,和
  2. 我不相信文档作者会考虑所有可能的用例。

我说这是一个很好的使用它。 如果你想downvote我,请评论的原因! 🙂

我喜欢这种方法,因为它使组件更加模块化。 唯一的绑定在模板中,并且意味着

  • 子控制器不必知道哪些对象添加其function(如在@ canttouchit的答案)
  • 父控件可以与任何其他具有get函数的子控件一起使用
  • 不需要广播,除非您严格控制事件命名空间,否则这将在大型应用程序中变得非常难看

这种方法更接近Tero关于模块化的指导思想 (注意,在他的模块化的例子中, contestants从父母传递给模板中的“孩子”指令)。

实际上,另一种解决scheme可能是考虑将ChildCntl作为指令来实现,并使用&绑定来注册init方法。