Question

如何从父作用域调用子作用域中定义的方法？

function ParentCntl() {
    // I want to call the $scope.get here
}

function ChildCntl($scope) {
    $scope.get = function() {
        return "LOL";    
    }
}

http://jsfiddle.net/wUPdW/

Answer 1

您可以将父母的$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/

Answer 2

让我建议另一个解决方案：

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


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

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

减少代码并使用原型继承。

Plunk

Answer 3

在孩子初始化时，在孩子的父母身上注册孩子的功能。我使用＆＃34; as＆＃34;为了清晰起见，模板中的符号。

TEMPLATE

<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";    
  };
}

＆＃34;但是＆＃34;，你说，＆＃34; ng-init isn't supposed to be used this way！＆＃34;。嗯，是的，但是

文档没有解释原因，
我不相信文档作者会考虑所有可能的用例。

我说这是一个很好的用途。如果你想向我投票，请说明理由！：）

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

孩子控制器不必知道任何关于添加其功能的对象（如@ canttouchit的答案）
父控件可以与任何其他具有get函数的子控件一起使用
不需要广播，除非你严格控制事件名称空间，否则在大型应用中会变得非常难看。

这种方法更接近于Tero's idea of modularising with directives（请注意，在他的模块化示例中，contestants从父项传递到＆＃34;子＆＃34;指令在模板中。

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

Answer 4

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

[[1]
 [1]
 [1]]

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

angularJS：如何在父作用域中调用子作用域函数

4 个答案: