[angularjs] AngularJS의 다른 컨트롤러에 컨트롤러를 어떻게 삽입합니까?

다른 구성 요소의 이미 인스턴스화 된 컨트롤러를 확보하려는 의도이고 구성 요소 / 지시문 기반 접근 방식을 따르는 경우 항상 require특정 계층을 따르는 다른 구성 요소의 컨트롤러 (구성 요소 인스턴스) 를 사용할 수 있습니다 .

예를 들면 :

//some container component that provides a wizard and transcludes the page components displayed in a wizard
myModule.component('wizardContainer', {
  ...,
  controller : function WizardController() {
    this.disableNext = function() {
      //disable next step... some implementation to disable the next button hosted by the wizard
    }
  },
  ...
});

//some child component
myModule.component('onboardingStep', {
 ...,
 controller : function OnboadingStepController(){

    this.$onInit = function() {
      //.... you can access this.container.disableNext() function
    }

    this.onChange = function(val) {
      //..say some value has been changed and it is not valid i do not want wizard to enable next button so i call container's disable method i.e
      if(notIsValid(val)){
        this.container.disableNext();
      }
    }
 },
 ...,
 require : {
    container: '^^wizardContainer' //Require a wizard component's controller which exist in its parent hierarchy.
 },
 ...
});

이제 위 구성 요소의 사용법은 다음과 같습니다.

<wizard-container ....>
<!--some stuff-->
...
<!-- some where there is this page that displays initial step via child component -->

<on-boarding-step ...>
 <!--- some stuff-->
</on-boarding-step>
...
<!--some stuff-->
</wizard-container>

당신이 설정할 수있는 여러 가지 방법이 있습니다 필요는 .

(접두사 없음)-현재 요소에서 필요한 컨트롤러를 찾습니다. 찾을 수없는 경우 오류가 발생합니다.

? -필요한 컨트롤러를 찾거나 찾을 수없는 경우 링크 fn에 null을 전달합니다.

^-요소와 상위 요소를 검색하여 필요한 컨트롤러를 찾습니다. 찾을 수없는 경우 오류가 발생합니다.

^^-요소의 부모를 검색하여 필요한 컨트롤러를 찾습니다. 찾을 수없는 경우 오류가 발생합니다.

? ^-요소와 부모를 검색하여 필요한 컨트롤러를 찾으려고 시도하거나 찾을 수없는 경우 링크 fn에 null을 전달합니다.

? ^^-요소의 부모를 검색하여 필요한 컨트롤러를 찾거나 찾을 수없는 경우 링크 fn에 null을 전달합니다.

---

---

이전 답변 :

$controller다른 컨트롤러 내에서 컨트롤러를 인스턴스화 하려면 서비스 를 삽입해야합니다 . 그러나 이로 인해 일부 디자인 문제가 발생할 수 있습니다. 언제든지 단일 책임을 따르는 재사용 가능한 서비스를 만들고 필요에 따라 컨트롤러에 삽입 할 수 있습니다.

예:

app.controller('TestCtrl2', ['$scope', '$controller', function ($scope, $controller) {
   var testCtrl1ViewModel = $scope.$new(); //You need to supply a scope while instantiating.
   //Provide the scope, you can also do $scope.$new(true) in order to create an isolated scope.
   //In this case it is the child scope of this scope.
   $controller('TestCtrl1',{$scope : testCtrl1ViewModel });
   testCtrl1ViewModel.myMethod(); //And call the method on the newScope.
}]);

어떤 경우에도 컨트롤러 인스턴스가 아닌에 TestCtrl1.myMethod()메서드를 연결했기 때문에 호출 할 수 없습니다 $scope.

컨트롤러를 공유하는 경우 항상 다음을 수행하는 것이 좋습니다.

.controller('TestCtrl1', ['$log', function ($log) {
    this.myMethod = function () {
        $log.debug("TestCtrl1 - myMethod");
    }
}]);

소비하는 동안 다음을 수행하십시오.

.controller('TestCtrl2', ['$scope', '$controller', function ($scope, $controller) {
     var testCtrl1ViewModel = $controller('TestCtrl1');
     testCtrl1ViewModel.myMethod();
}]);

첫 번째 경우에는 실제로 $scope뷰 모델이고 두 번째 경우에는 컨트롤러 인스턴스 자체입니다.