เมื่อฉันโหลดมุมมองฉันต้องการเรียกใช้รหัสเริ่มต้นในตัวควบคุมที่เกี่ยวข้อง

ในการทำเช่นนั้นฉันได้ใช้คำสั่ง ng-init กับองค์ประกอบหลักของมุมมองของฉัน:

<div ng-init="init()">
  blah
</div>

และในตัวควบคุม:

$scope.init = function () {
    if ($routeParams.Id) {
        //get an existing object
        });
    } else {
       //create a new object
    }

    $scope.isSaving = false;
}

คำถามแรก: นี่เป็นวิธีที่ถูกต้องหรือไม่?

สิ่งต่อไปฉันมีปัญหากับลำดับเหตุการณ์ที่เกิดขึ้น ในมุมมองฉันมีปุ่ม 'บันทึก' ซึ่งใช้ng-disabledคำสั่งเช่นนี้:

<button ng-click="save()" ng-disabled="isClean()">Save</button>

isClean()ฟังก์ชั่นที่กำหนดไว้ในการควบคุม:

$scope.isClean = function () {
    return $scope.hasChanges() && !$scope.isSaving;
}

อย่างที่คุณเห็นมันใช้$scope.isSavingแฟล็กซึ่งเริ่มต้นในinit()ฟังก์ชัน

ปัญหา: เมื่อมุมมองที่มีการโหลดฟังก์ชั่น isClean เรียกว่าก่อนที่จะinit()ฟังก์ชั่นจึงธงคือisSaving undefinedฉันจะทำอย่างไรเพื่อป้องกันสิ่งนั้น

เมื่อมุมมองของคุณโหลดขึ้นตัวควบคุมที่เกี่ยวข้องก็เช่นกัน แทนที่จะใช้ng-initเพียงแค่เรียกinit()วิธีการของคุณในคอนโทรลเลอร์ของคุณ:

$scope.init = function () {
    if ($routeParams.Id) {
        //get an existing object
    } else {
        //create a new object
    }
    $scope.isSaving = false;
}
...
$scope.init();

เนื่องจากคอนโทรลเลอร์ของคุณทำงานมาก่อนng-initสิ่งนี้จะช่วยแก้ปัญหาที่สองของคุณด้วย

ซอ

ในฐานะที่เป็นJohn David Fiveที่กล่าวถึงคุณอาจไม่ต้องการที่จะแนบนี้$scopeเพื่อที่จะทำให้วิธีการส่วนตัว

var init = function () {
    // do something
}
...
init();

ดู jsFiddle

หากคุณต้องการรอให้ข้อมูลบางอย่างถูกตั้งค่าไว้ล่วงหน้าให้ย้ายคำขอข้อมูลนั้นไปยังการแก้ไขหรือเพิ่มผู้เฝ้าดูไปยังคอลเล็กชันหรืออ็อบเจ็กต์นั้นและเรียกใช้วิธีการเริ่มต้นเมื่อข้อมูลของคุณตรงตามเกณฑ์การเริ่มต้นของคุณ ฉันมักจะลบผู้เฝ้าดูเมื่อมีคุณสมบัติตรงตามข้อกำหนดของข้อมูลดังนั้นฟังก์ชัน init จึงไม่ทำงานแบบสุ่มอีกครั้งหากข้อมูลการรับชมของคุณเปลี่ยนแปลงและตรงตามเกณฑ์ของคุณเพื่อเรียกใช้วิธีการเริ่มต้นของคุณ

var init = function () {
    // do something
}
...
var unwatch = scope.$watch('myCollecitonOrObject', function(newVal, oldVal){
                    if( newVal && newVal.length > 0) {
                        unwatch();
                        init();
                    }
                });

เนื่องจาก AngularJS 1.5 เราควรใช้$onInitซึ่งมีอยู่ในส่วนประกอบ AngularJS ใด ๆ นำมาจากเอกสารประกอบวงจรชีวิตตั้งแต่ v1.5 เป็นวิธีที่เตรียมไว้ล่วงหน้า:

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

var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {

    //default state
    $scope.name = '';

    //all your init controller goodness in here
    this.$onInit = function () {
      $scope.name = 'Superhero';
    }
});

>> การสาธิตซอ

ตัวอย่างขั้นสูงของการใช้วงจรชีวิตของส่วนประกอบ:

วงจรชีวิตของส่วนประกอบช่วยให้เราสามารถจัดการกับส่วนประกอบต่างๆได้อย่างดี ช่วยให้เราสามารถสร้างเหตุการณ์เช่น "init" "เปลี่ยนแปลง" หรือ "ทำลาย" ของส่วนประกอบ ด้วยวิธีนี้เราสามารถจัดการสิ่งต่างๆได้ซึ่งขึ้นอยู่กับวงจรชีวิตของส่วนประกอบ เล็ก ๆ น้อย ๆ นี้แสดงให้เห็นตัวอย่างในการลงทะเบียนและการถอนการลงทะเบียนฟังเหตุการณ์$rootScope $onเมื่อทราบว่าเหตุการณ์ที่$onผูกไว้$rootScopeจะไม่ถูกยกเลิกเมื่อคอนโทรลเลอร์สูญเสียการอ้างอิงในมุมมองหรือถูกทำลายเราจำเป็นต้องทำลาย$rootScope.$onผู้ฟังด้วยตนเอง สถานที่ที่ดีในการใส่สิ่งนั้นคือ$onDestroyฟังก์ชันวงจรชีวิตของส่วนประกอบ:

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope, $rootScope) {

  var registerScope = null;

  this.$onInit = function () {
    //register rootScope event
    registerScope = $rootScope.$on('someEvent', function(event) {
        console.log("fired");
    });
  }

  this.$onDestroy = function () {
    //unregister rootScope event by calling the return function
    registerScope();
  }
});

>> การสาธิตซอ

หรือคุณสามารถเริ่มต้นอินไลน์ในตัวควบคุม หากคุณใช้ฟังก์ชัน init ภายในตัวควบคุมไม่จำเป็นต้องกำหนดไว้ในขอบเขต ในความเป็นจริงมันสามารถดำเนินการได้ด้วยตนเอง:

function MyCtrl($scope) {
    $scope.isSaving = false;

    (function() {  // init
        if (true) { // $routeParams.Id) {
            //get an existing object
        } else {
            //create a new object
        }
    })()

    $scope.isClean = function () {
       return $scope.hasChanges() && !$scope.isSaving;
    }

    $scope.hasChanges = function() { return false }
}

ฉันใช้เทมเพลตต่อไปนี้ในโครงการของฉัน:

angular.module("AppName.moduleName", [])

/**
 * @ngdoc controller
 * @name  AppName.moduleName:ControllerNameController
 * @description Describe what the controller is responsible for.
 **/
    .controller("ControllerNameController", function (dependencies) {

        /* type */ $scope.modelName = null;
        /* type */ $scope.modelName.modelProperty1 = null;
        /* type */ $scope.modelName.modelPropertyX = null;

        /* type */ var privateVariable1 = null;
        /* type */ var privateVariableX = null;

        (function init() {
            // load data, init scope, etc.
        })();

        $scope.modelName.publicFunction1 = function () /* -> type  */ {
            // ...
        };

        $scope.modelName.publicFunctionX = function () /* -> type  */ {
            // ...
        };

        function privateFunction1() /* -> type  */ {
            // ...
        }

        function privateFunctionX() /* -> type  */ {
            // ...
        }

    });