angularJS: 부모 스코프에서 자녀 스코프 함수를 호출하는 방법

angularJS: 부모 스코프에서 자녀 스코프 함수를 호출하는 방법

부모 범위에서 자녀 범위에서 정의된 메서드를 호출하려면 어떻게 해야 합니까?

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

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

http://jsfiddle.net/wUPdW/

부모에서 자녀로 사용할 수 있습니다.

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

나는 이것이 좋은 사용법이라고 말한다.다운투표를 하고 싶은 경우는, 이유를 코멘트해 주세요.:)

컴포넌트를 보다 모듈식으로 유지할 수 있기 때문에 이 접근방식이 마음에 듭니다.바인딩만 템플릿에 있습니다.즉,

• 하위 컨트롤러는 (@cantouchit의 답변과 같이) 어떤 오브젝트에 기능을 추가할지 알 필요가 없습니다.
• 부모 컨트롤은 get 기능이 있는 다른 자녀 컨트롤과 함께 사용할 수 있습니다.
• 브로드캐스트가 필요하지 않습니다. 이벤트 이름 공간을 엄격하게 제어하지 않으면 큰 앱에서 매우 추악해집니다.

이 접근방식은 디렉티브로 모듈화하려는 Tero의 아이디어에 보다 밀접하게 접근합니다(모듈화 예에서는 다음과 같습니다).contestantsTHE TEMPLATE에서 부모에서 "자녀" 지시어로 전달됩니다.

실제로 또 다른 해결방법은 다음과 같은 방법으로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 메서드의 목적지를 증명하고 있습니다.

언급URL : https://stackoverflow.com/questions/19038778/angularjs-how-to-call-child-scope-function-in-parent-scope