Bagaimana cara menyuntikkan pengontrol ke pengontrol lain di AngularJS

Saya baru mengenal Angular dan mencoba mencari cara untuk melakukan sesuatu ...

Menggunakan AngularJS, bagaimana saya bisa menyuntikkan pengontrol untuk digunakan dalam pengontrol lain?

Saya memiliki cuplikan berikut:

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();
}]);

Ketika saya menjalankan ini, saya mendapatkan kesalahan:

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

Haruskah saya mencoba menggunakan pengontrol di dalam pengontrol lain, atau haruskah saya menjadikan ini layanan?

Jika maksud Anda adalah untuk mendapatkan kontroler yang sudah dipakai dari komponen lain dan jika Anda mengikuti pendekatan berbasis komponen / direktif, Anda selalu dapat requiremengontrol (turunan komponen) dari komponen lain yang mengikuti hierarki tertentu.

Sebagai contoh:

//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.
 },
 ...
});

Sekarang penggunaan komponen di atas mungkin seperti ini:

<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>

Ada banyak cara untuk mengatur keperluan .

(tanpa awalan) - Temukan pengontrol yang diperlukan pada elemen saat ini. Lempar kesalahan jika tidak ditemukan.

? - Mencoba menemukan pengontrol yang diperlukan atau meneruskan null ke tautan fn jika tidak ditemukan.

^ - Temukan pengontrol yang diperlukan dengan mencari elemen dan induknya. Lempar kesalahan jika tidak ditemukan.

^^ - Temukan pengontrol yang diperlukan dengan mencari orang tua elemen. Lempar kesalahan jika tidak ditemukan.

? ^ - Mencoba menemukan pengontrol yang diperlukan dengan mencari elemen dan induknya atau meneruskan null ke link fn jika tidak ditemukan.

? ^^ - Mencoba menemukan pengontrol yang diperlukan dengan mencari orang tua elemen, atau meneruskan null ke link fn jika tidak ditemukan.

Jawaban Lama:

Anda perlu memasukkan $controllerlayanan untuk membuat instance pengontrol di dalam pengontrol lain. Namun ketahuilah bahwa ini mungkin menyebabkan beberapa masalah desain. Anda selalu dapat membuat layanan yang dapat digunakan kembali yang mengikuti Tanggung Jawab Tunggal dan memasukkannya ke dalam pengontrol sesuai kebutuhan.

Contoh:

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.
}]);

Bagaimanapun, Anda tidak dapat memanggil TestCtrl1.myMethod()karena Anda telah memasang metode pada $scopedan bukan pada contoh pengontrol.

Jika Anda berbagi pengontrol, maka akan selalu lebih baik untuk melakukan: -

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

dan saat mengkonsumsi lakukan:

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

Dalam kasus pertama $scopeadalah model tampilan Anda, dan dalam kasus kedua adalah contoh pengontrol itu sendiri.

Saya menyarankan pertanyaan yang harus Anda tanyakan adalah bagaimana menyuntikkan layanan ke dalam pengontrol. Layanan gemuk dengan pengontrol kurus adalah aturan praktis yang baik, alias cukup gunakan pengontrol untuk merekatkan layanan / pabrik Anda (dengan logika bisnis) ke dalam tampilan Anda.

Pengontrol mendapatkan sampah yang dikumpulkan pada perubahan rute, jadi misalnya, jika Anda menggunakan pengontrol untuk menahan logika bisnis yang memberikan nilai, Anda akan kehilangan status pada dua halaman jika pengguna aplikasi mengklik tombol kembali browser.

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();
}]);

Ini adalah pekerjaan demo pabrik yang disuntikkan ke dalam dua pengontrol

Juga, saya sarankan membaca tutorial ini tentang layanan / pabrik.

Tidak perlu mengimpor / menyuntikkan pengontrol Anda di JS. Anda cukup menyuntikkan pengontrol / pengontrol bersarang Anda melalui HTML. Ini berhasil untuk saya. Suka :

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

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

Ini bekerja paling baik dalam kasus saya, di mana TestCtrl2 memiliki arahannya sendiri.

var testCtrl2 = $controller('TestCtrl2')

Ini memberi saya kesalahan yang mengatakan kesalahan injeksi scopeProvider.

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

Ini tidak benar-benar berfungsi jika Anda memiliki arahan di 'TestCtrl1', arahan itu sebenarnya memiliki cakupan yang berbeda dari yang dibuat di sini. Anda berakhir dengan dua contoh 'TestCtrl1'.

Solusi terbaik:-

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);})

// Di sini Anda mendapat panggilan kontroler pertama tanpa menjalankannya

Anda juga dapat menggunakan $rootScopeuntuk memanggil fungsi / metode pengontrol pertama dari pengontrol kedua seperti ini,

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

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

gunakan skrip ketikan untuk pengkodean Anda, karena berorientasi objek, diketik dengan ketat, dan mudah memelihara kodenya ...

untuk info lebih lanjut tentang typescipt klik di sini

Di sini satu contoh sederhana yang telah saya buat untuk berbagi data antara dua pengontrol menggunakan Skrip Ketik ...

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);

}