Apa siklus hidup Pengontrol AngularJS?

199

Bisakah seseorang menjelaskan apa siklus hidup pengontrol AngularJS?

  • Apakah controller merupakan singleton, atau dibuat / dihancurkan sesuai permintaan?
  • Jika yang terakhir, apa yang memicu penciptaan / penghancuran controller?

Perhatikan contoh di bawah ini:

var demoApp = angular.module('demo')
  .config(function($routeProvider, $locationProvider) {
    $routeProvider
      .when('/home', {templateUrl: '/home.html', controller: 'HomeCtrl'})
      .when('/users',{templateUrl: '/users.html', controller: 'UsersCtrl'})
      .when('/users/:userId', {templateUrl: '/userEditor.html', controller: 'UserEditorCtrl'});
  });

demoApp.controller('UserEditorCtrl', function($scope, $routeParams, UserResource) {
  $scope.user = UserResource.get({id: $routeParams.userId});
});

misalnya:

Dalam contoh di atas, ketika saya menavigasi ke /users/1, pengguna 1 dimuat, dan diatur ke $scope.

Kemudian, ketika saya menavigasi ke /users/2, pengguna 2 dimuat. Apakah instance yang sama UserEditorCtrldigunakan kembali, atau apakah instance baru dibuat?

  • Jika itu contoh baru, apa yang memicu penghancuran contoh pertama?
  • Jika digunakan kembali, bagaimana cara kerjanya? (mis., metode untuk memuat data tampaknya berjalan saat membuat controller)
Marty Pitt
sumber

Jawaban:

227

Sebenarnya pertanyaannya adalah apa siklus hidup ngViewpengontrol.

Pengontrol bukan lajang. Siapa pun dapat membuat pengontrol baru dan tidak pernah dihancurkan secara otomatis. Faktanya adalah bahwa ia umumnya terikat pada siklus hidup dari ruang lingkup yang mendasarinya. Pengontrol tidak secara otomatis dihancurkan setiap kali ruang lingkupnya dihancurkan. Namun, setelah menghancurkan ruang lingkup yang mendasarinya, pengontrolnya tidak berguna (setidaknya, menurut desain, seharusnya).

Menjawab pertanyaan spesifik Anda, ngViewarahan (juga untuk ngControllerarahan) akan selalu membuat pengontrol baru dan cakupan baru setiap kali navigasi terjadi. Dan ruang lingkup terakhir akan dihancurkan juga.

"Peristiwa" siklus hidup cukup sederhana. Anda "ciptaan acara" adalah pembangunan controller itu sendiri. Jalankan kode Anda. Untuk mengetahui kapan itu tidak berguna ( "acara penghancuran" ), dengarkan $destroyacara lingkup :

$scope.$on('$destroy', function iVeBeenDismissed() {
  // say goodbye to your controller here
  // release resources, cancel request...
})

Untuk ngViewkhusus, Anda dapat mengetahui kapan konten akan dimuat melalui acara lingkup $viewContentLoaded:

$scope.$on('$viewContentLoaded', function readyToTrick() {
  // say hello to your new content here
  // BUT NEVER TOUCHES THE DOM FROM A CONTROLLER
});

Ini adalah Plunker dengan bukti konsep (buka jendela konsol Anda).

Caio Cunha
sumber
10
Saat ini kode yang menghancurkan $ scope tinggal di github.com/angular/angular.js/blob/… . Sangat membantu, terima kasih!
w00t
4
viewContentLoaded hanya berfungsi jika Anda menggunakan batas waktu karena akan dikirim tepat sebelum templat dimuat ... dokumen mengatakan yang sebaliknya, tetapi mereka merujuk ke mentah template: "HTML STRING"ketika itu adalah file templat yang dimuat seperti async like.
user3338098