[angularjs] angularJS : 부모 범위에서 자식 범위 함수를 호출하는 방법

자녀가 초기화 할 때 부모에 자녀의 기능을 등록합니다. 템플릿에서 명확성을 위해 “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";
    };
});