Angular에서 컨트롤러를 다른 컨트롤러에 주입하려면 어떻게 해야 합니까?JS

Angular에서 컨트롤러를 다른 컨트롤러에 주입하려면 어떻게 해야 합니까?JS

앵글이 처음이라서 어떻게 해야 할지 고민 중인데...

AngularJS를 사용하여 다른 컨트롤러 내에서 사용하는 컨트롤러를 주입하려면 어떻게 해야 합니까?

다음과 같은 스니펫이 있습니다.

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

app.controller('TestCtrl1', ['$scope', function ($scope) {
    $scope.myMethod = function () {
        console.log("TestCtrl1 - myMethod");
    }
}]);

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

이것을 실행하면, 다음의 에러가 표시됩니다.

Error: [$injector:unpr] Unknown provider: TestCtrl1Provider <- TestCtrl1
http://errors.angularjs.org/1.2.21/$injector/unpr?p0=TestCtrl1Provider%20%3C-%20TestCtrl1

다른 컨트롤러 내부에서 컨트롤러를 사용하려고 해도 될까요?아니면 이 컨트롤러는 서비스로 해야 하나요?

하고 컴포넌트든지 컴포넌트/디렉티브 기반 컨트롤러를 입수할 수 .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>

설정할 수 있는 방법은 여러 가지가 있습니다.

(프리픽스 없음): 현재 요소에서 필요한 컨트롤러를 찾습니다.찾을 수 없는 경우 오류를 발생시킵니다.

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

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

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

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

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

---

---

오래된 답변:

다른 컨트롤러 내의 컨트롤러를 인스턴스화하기 위해 서비스를 주입해야 합니다.그러나 이는 설계상의 문제로 이어질 수 있습니다.언제든지 단일 책임에 따르는 재사용 가능한 서비스를 생성하여 필요에 따라 컨트롤러에 주입할 수 있습니다.

예:

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는 뷰 모델입니다.두 번째 케이스에서는 컨트롤러 인스턴스 자체입니다.

컨트롤러에 서비스를 주입하는 방법을 묻는 것이 좋습니다.슬림형 컨트롤러가 탑재된 팻 서비스는 경험상 매우 적합합니다.컨트롤러를 사용하여 서비스/팩토리(비즈니스 로직)를 뷰에 통합하기만 하면 됩니다.

컨트롤러는 경로 변경 시 가비지가 수집되므로 예를 들어 컨트롤러를 사용하여 값을 렌더링하는 비즈니스 로직을 유지하는 경우 앱 사용자가 브라우저 뒤로 버튼을 클릭하면 두 페이지에서 상태가 손실됩니다.

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

app.factory('methodFactory', function () {
    return { myMethod: function () {
            console.log("methodFactory - myMethod");
    };
};

app.controller('TestCtrl1', ['$scope', 'methodFactory', function ($scope,methodFactory) {  //Comma was missing here.Now it is corrected.
    $scope.mymethod1 = methodFactory.myMethod();
}]);

app.controller('TestCtrl2', ['$scope', 'methodFactory', function ($scope, methodFactory) {
    $scope.mymethod2 = methodFactory.myMethod();
}]);

2개의 컨트롤러에 공장에서 주입된 데모를 보여 줍니다.

또한 서비스/팩토리에 대한 이 튜토리얼을 읽어보실 것을 권장합니다.

JS에서 컨트롤러를 Import/Inject할 필요가 없습니다.HTML을 사용하여 컨트롤러/네스트 컨트롤러를 삽입하기만 하면 됩니다.나한테는 효과가 있었어.예를 들어 다음과 같습니다.

<div ng-controller="TestCtrl1">
    <div ng-controller="TestCtrl2">
      <!-- your code--> 
    </div> 
</div>

를 사용할 수도 있습니다.$rootScope이렇게 두 번째 컨트롤러에서 첫 번째 컨트롤러의 기능/기능을 호출하려면

.controller('ctrl1', function($rootScope, $scope) {
     $rootScope.methodOf2ndCtrl();
     //Your code here. 
})

.controller('ctrl2', function($rootScope, $scope) {
     $rootScope.methodOf2ndCtrl = function() {
     //Your code here. 
}
})

<div ng-controller="TestCtrl1">
    <div ng-controller="TestCtrl2">
      <!-- your code--> 
    </div> 
</div>

이것은 TestCtrl2가 독자적인 지시를 가지고 있는 경우에 가장 적합합니다.

var testCtrl2 = $controller('TestCtrl2')

scope Provider injection error 라고 하는 에러가 표시됩니다.

   var testCtrl1ViewModel = $scope.$new();
   $controller('TestCtrl1',{$scope : testCtrl1ViewModel });
   testCtrl1ViewModel.myMethod(); 

TestCtrl1'에 디렉티브가 있는 경우 이 디렉티브는 실제로 여기서 작성된 것과 다른 범위를 가집니다.그러면 'TestCtrl1'의 두 인스턴스가 생성됩니다.

최적의 솔루션:-

angular.module("myapp").controller("frstCtrl",function($scope){
    $scope.name="Atul Singh";
})
.controller("secondCtrl",function($scope){
     angular.extend(this, $controller('frstCtrl', {$scope:$scope}));
     console.log($scope);
})

// 여기에서는 첫 번째 컨트롤러 호출을 실행하지 않고 받았습니다.

객체 지향적이고, 엄밀하게 타이핑되어 있고, 코드 유지보수가 용이하기 때문에 코딩에 typescript를 사용합니다.

타입의 상세한 것에 대하여는, 여기를 클릭해 주세요.

여기에서는 Typescript를 사용하여 두 컨트롤러 간에 데이터를 공유하기 위해 작성한 간단한 예를 보여 줍니다.

module Demo {
//create only one module for single Applicaiton
angular.module('app', []);
//Create a searvie to share the data
export class CommonService {
    sharedData: any;
    constructor() {
        this.sharedData = "send this data to Controller";
    }
}
//add Service to module app
angular.module('app').service('CommonService', CommonService);

//Create One controller for one purpose
export class FirstController {
    dataInCtrl1: any;
    //Don't forget to inject service to access data from service
    static $inject = ['CommonService']
    constructor(private commonService: CommonService) { }
    public getDataFromService() {
        this.dataInCtrl1 = this.commonService.sharedData;
    }
}
//add controller to module app
angular.module('app').controller('FirstController', FirstController);
export class SecondController {
    dataInCtrl2: any;
    static $inject = ['CommonService']
    constructor(private commonService: CommonService) { }
    public getDataFromService() {
        this.dataInCtrl2 = this.commonService.sharedData;
    }
}
angular.module('app').controller('SecondController', SecondController);

}

언급URL : https://stackoverflow.com/questions/25417162/how-do-i-inject-a-controller-into-another-controller-in-angularjs