為什么在AngularJS的$ scope中的ng-init中設置的變量未定義？

Question

我在視圖中使用ng-init設置了一個變量，然后嘗試在控制器中訪問該變量。 但是，當我嘗試訪問它時，得到的是undefined 。

相關代碼段：

我的看法：

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

我的控制器：

var MyCtrl;

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

JSFiddle

我在這里想念什么？

Answer 1

等待直到變量被初始化。

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

Answer 2

您還可以利用JavaScript如何定義函數並將函數用於ng-init而不是$ watch（ jsfiddle ）。

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

控制器：

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

這個問題類似： 如何使用ng-init設置作用域屬性？

Answer 3

在將pageTitle變量添加到$ scope對象之前，已創建控制器。

Answer 4

由於您正在執行“單一時間初始化”，因此像構造函數一樣，建議您在使用變量后取消手表的綁定：

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