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. 문서 작성자가 모든 가능한 사용 사례를 고려했다고 생각하지 않습니다.

나는 이것이 그것을 위해 좋은 사용이라고 말한다. 저를 비하하고 싶다면 이유를 적어주세요! :)

이 접근 방식은 구성 요소를 더 모듈 식으로 유지하기 때문에 좋아합니다. 유일한 바인딩은 템플릿에 있으며

• 자식 컨트롤러는 기능을 추가 할 개체에 대해 알 필요가 없습니다 (@canttouchit의 답변에서와 같이).
• 부모 컨트롤은 get 함수가있는 다른 자식 컨트롤과 함께 사용할 수 있습니다.
• 브로드 캐스팅이 필요하지 않습니다. 이벤트 네임 스페이스를 엄격하게 제어하지 않는 한 큰 앱에서는 매우 추하게됩니다.

이 접근 방식은 지시문을 사용한 모듈화에 대한 Tero의 아이디어에 더 가깝게 접근 합니다 (그의 모듈화 된 예제에서contestants 템플릿에서 부모에서 "자식"지시문으로 전달됨).

실제로 또 다른 해결책은를 ChildCntl지시문으로 구현하는 것을 고려 하고 &바인딩을 사용 하여 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 메소드의 목적지를 증명하고 있습니다.