Tại sao biến được đặt trong ng-init undefined trong $ scope trong AngularJS?

Question

Tôi có một biến tôi đang đặt trong chế độ xem của mình với ng-init mà tôi đang cố gắng truy cập trong bộ điều khiển của mình. Tuy nhiên, khi tôi cố gắng truy cập vào nó, tôi nhận được một số undefined.

mảnh có liên quan của mã:

Quan điểm của tôi:

<div ng-controller="MyCtrl"> 
    <div ng-init="pageTitle = 'kittens'"> 
    </div> 
</div> 

điều khiển của tôi:

var MyCtrl; 

MyCtrl = function($scope) { 
    return console.log($scope.pageTitle); 
}; 

JSFiddle

tôi thiếu gì ở đây?

Answer 1

Đợi cho đến khi biến là init.

$scope.$watch('pageTitle', function() { 
    console.log($scope.pageTitle); 
}); 

Answer 2

bộ điều khiển đang được tạo trước khi biến trangTitle được thêm vào đối tượng $ scope.

Answer 3

Bạn cũng có thể tận dụng cách JavaScript định nghĩa các hàm và sử dụng hàm cho ng-init thay vì $ watch (jsfiddle).

<div ng-app> 
    <div ng-controller="MyCtrl" ng-init="pageTitleEquals('kittens')"> 
     Page title is {{ pageTitle }} 
    </div> 
</div> 

Bộ điều khiển:

var MyCtrl = function($scope) { 
    $scope.pageTitleEquals = function(title) { 
     $scope.pageTitle = title; 
    } 
}; 

Câu hỏi này cũng tương tự như: How to set scope property with ng-init?

Answer 4

Vì bạn đang làm một "thời gian init đơn", giống như một constructor tôi khuyên bạn nên unbind đồng hồ sau khi sử dụng biến:

var pageTitleWatch = $scope.$watch('pageTitle', function() { 
    console.log($scope.pageTitle); 
    // Now just unbind it after doing your logic 
    pageTitleWatch(); 
});