Bir AngularJS Denetleyicisinin yaşam döngüsü nedir?


199

Birisi bir AngularJS denetleyicisinin yaşam döngüsünün ne olduğunu açıklığa kavuşturabilir mi?

  • Denetleyici tek mi yoksa talep üzerine mi yaratılıyor / yok ediliyor mu?
  • İkincisi, denetleyicinin yaratılmasını / yok edilmesini ne tetikler?

Aşağıdaki örneği düşünün:

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

Örneğin:

Yukarıdaki örnekte, öğesine gittiğimde /users/1, kullanıcı 1 yüklenir ve $scope.

Sonra, şuraya gittiğimde /users/2, kullanıcı 2 yüklenir. Aynı UserEditorCtrlyeniden kullanım örneği mi yoksa yeni bir örnek mi oluşturuldu?

  • Bu yeni bir örnekse, ilk örneğin yok edilmesini tetikleyen nedir?
  • Yeniden kullanılırsa, bu nasıl çalışır? (yani, verileri yükleme yöntemi, denetleyicinin oluşturulmasında çalışıyor gibi görünür)

Yanıtlar:


227

Aslında soru, bir ngViewkontrolörün yaşam döngüsünün ne olduğudur.

Denetleyiciler tekil değildir. Herkes yeni bir denetleyici oluşturabilir ve asla otomatik olarak yok edilmez. Gerçek şu ki, genellikle temel kapsamının yaşam döngüsüne bağlı. Kontrol birimi, kapsamı her yok edildiğinde otomatik olarak yok edilmez. Bununla birlikte, altta yatan bir kapsamı yok ettikten sonra, kontrolörü işe yaramaz (en azından tasarım gereği).

Özel sorunuza yanıt olarak, bir ngViewyönerge ( ngControlleryönerge için de) her navigasyon gerçekleştiğinde daima yeni bir kontrolör ve yeni bir kapsam oluşturur . Ve son kapsam da yok edilecek .

Yaşam döngüsü "olayları" oldukça basittir. Sizin "yaratılış olayı" Kumandanızda kendisinin yapıdır. Sadece kodunuzu çalıştırın. Ne zaman işe yaramayacağını ( "imha olayı" ) bilmek için kapsam $destroyolayını dinleyin :

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

İçin ngViewözel olarak, içerik kapsamı olay üzerinden yüklenen aldığında bilir $viewContentLoaded:

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

İşte konsept kanıtı olan bir Plunker (konsol pencerenizi açın).


10
Günümüzde $ kapsamını tahrip eden kod github.com/angular/angular.js/blob/… adresinde yaşıyor . Çok faydalı, teşekkürler!
w00t

4
viewContentLoaded, yalnızca şablon yüklenmeden hemen önce gönderildiği için bir zaman aşımı kullanırsanız çalışır ... dokümanlar tersini söyler, ancak template: "HTML STRING"zaman uyumsuz olarak yüklendiği bir şablon dosyası olduğunda ham anlamına gelir.
user3338098
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.