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/

更新：还有另一个版本，耦合度更低，更易于测试：

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/

让我提出另一个解决方案：

var app = angular.module("myNoteApp", []);


app.controller("ParentCntl", function($scope) {
    $scope.obj = {};
});

app.controller("ChildCntl", function($scope) {
    $scope.obj.get = function() {
            return "LOL";    
    };
});

更少的代码并使用原型继承。

朋克

当孩子正在初始化时，在父母上注册孩子的功能。为了清楚起见，我在模板中使用了“ as”符号。

模板

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

控制器

...
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. 我不认为文档作者考虑了所有可能的用例。

我说这是一个很好的用途。如果您想对我投反对票，请说明原因！:)

我喜欢这种方法，因为它使组件保持模块化。唯一的绑定在模板中，这意味着

• 子Controller不必知道向哪个对象添加其功能（如@canttouchit的回答）
• 父控件可以与具有get函数的任何其他子控件一起使用
• 不需要广播，除非您严格控制事件名称空间，否则在大型应用程序中广播会非常难看

这种方法更接近于Tero使用指令进行模块化的想法（请注意，在他的模块化示例中，contestants在模板中将其从父指令传递给“子”指令）。

确实，另一种解决方案可能是考虑将ChildCntlas作为指令来实现，并使用&绑定来注册init方法。

您可以使子对象成为对象。

var app = angular.module("myApp", []);


app.controller("ParentCntl", function($scope) {
    $scope.child= {};
    $scope.get = function(){
      return $scope.child.get(); // you can call it. it will return 'LOL'
    }
   // or  you can call it directly like $scope.child.get() once it loaded.
});

app.controller("ChildCntl", function($scope) {
    $scope.obj.get = function() {
            return "LOL";    
    };
});

在这里孩子是get方法的证明目的地。