Почему переменная установлена в ng-init undefined в $scope в AngularJS?

У меня есть переменная, которую я устанавливаю в своем представлении с помощью 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

Что мне здесь не хватает?

Ответ 1

Подождите, пока переменная будет init.

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

Ответ 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;
    }
};

Этот вопрос аналогичен: Как установить свойство scope с помощью ng-init?

Ответ 3

контроллер создается до того, как переменная pageTitle добавляется к объекту $scope.

Ответ 4

Поскольку вы выполняете "однократный init", как конструктор, я рекомендую вам отвязать часы после использования переменной:

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