วงจรชีวิตของ AngularJS Controller คืออะไร?


199

ใครช่วยอธิบายให้ชัดเจนว่าวงจรชีวิตของคอนโทรลเลอร์ AngularJS คืออะไร

  • เป็นตัวควบคุมเดี่ยวหรือสร้าง / ทำลายตามความต้องการ?
  • หากหลังสิ่งที่ก่อให้เกิดการสร้าง / ทำลายของตัวควบคุมคืออะไร?

ลองพิจารณาตัวอย่างด้านล่าง:

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

เช่น:

ในตัวอย่างข้างต้นเมื่อฉันนำทางไปยัง/users/1ผู้ใช้ 1 $scopeมีการโหลดและการตั้งค่าไป

จากนั้นเมื่อฉันนำทางไปยัง/users/2ผู้ใช้ 2 ถูกโหลด อินสแตนซ์เดียวกันของการUserEditorCtrlใช้ซ้ำหรือเป็นอินสแตนซ์ใหม่ที่สร้างขึ้นหรือไม่

  • หากเป็นอินสแตนซ์ใหม่สิ่งที่ทำให้เกิดการทำลายอินสแตนซ์แรก
  • หากนำมาใช้ซ้ำจะทำงานได้อย่างไร (เช่น. วิธีการโหลดข้อมูลดูเหมือนว่าจะทำงานในการสร้างตัวควบคุม)

คำตอบ:


227

ที่จริงคำถามก็คือวงจรชีวิตของngViewตัวควบคุมคืออะไร

ตัวควบคุมไม่ใช่แบบซิงเกิล ทุกคนสามารถสร้างตัวควบคุมใหม่และจะไม่ถูกทำลายโดยอัตโนมัติ ความจริงก็คือโดยทั่วไปแล้วมันจะผูกพันกับวงจรชีวิตของขอบเขตพื้นฐานของมัน ตัวควบคุมจะไม่ถูกทำลายโดยอัตโนมัติเมื่อใดก็ตามที่ขอบเขตถูกทำลาย อย่างไรก็ตามหลังจากทำลายขอบเขตพื้นฐานแล้วคอนโทรลเลอร์จะไร้ประโยชน์ (อย่างน้อยก็โดยการออกแบบก็ควร)

ตอบคำถามเฉพาะของคุณngViewคำสั่ง (เช่นเดียวกับngControllerคำสั่ง) จะสร้างตัวควบคุมใหม่และขอบเขตใหม่ทุกครั้งที่มีการนำทางเกิดขึ้น และขอบเขตสุดท้ายก็จะถูกทำลายเช่นกัน

"กิจกรรม" วงจรชีวิตค่อนข้างง่าย "event creation"ของคุณคือการสร้างคอนโทรลเลอร์ของคุณเอง เพียงแค่เรียกใช้รหัสของคุณ หากต้องการทราบว่าเมื่อใดที่มันไร้ประโยชน์ ( "เหตุการณ์การทำลายล้าง" ) ให้ฟัง$destroyเหตุการณ์ขอบเขต:

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

สำหรับngViewโดยเฉพาะคุณสามารถทราบได้ว่าเมื่อใดที่เนื้อหาถูกโหลดผ่านเหตุการณ์ขอบเขต$viewContentLoaded:

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

นี่คือ Plunker ที่มีการพิสูจน์แนวคิด (เปิดหน้าต่างคอนโซลของคุณ)


10
ปัจจุบันรหัสที่ทำลาย $ ขอบเขตอาศัยอยู่ที่github.com/angular/angular.js/blob/... มีประโยชน์มากขอบคุณ!
w00t

4
viewContentLoaded ทำงานเฉพาะถ้าคุณใช้หมดเวลาเพราะมันได้รับการส่งเพียงก่อนที่แม่แบบที่มีการโหลด ... เอกสารบอกว่าตรงข้าม แต่พวกเขาจะหมายถึงดิบtemplate: "HTML STRING"เมื่อมันแฟ้มแม่แบบจะได้รับ async โหลดเช่น
user3338098
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.