为什么在 AngularJS 的 $scope 中未定义 ng-init 中设置的变量？答案

【问题标题】：Why is the variable set in ng-init undefined in $scope in AngularJS?为什么在 AngularJS 的 $scope 中未定义 ng-init 中设置的变量？
【发布时间】：2013-09-07 15:00:29
【问题描述】：

我在视图中使用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

我在这里错过了什么？

【问题讨论】：

那是因为 console.log() 返回 undefined，然后你将该值作为控制器返回。
你错过了正确的小提琴吗？
@ssilas777 抱歉，请再次查看。

标签： angularjs

【解决方案1】：

等到变量初始化。

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

【讨论】：

我更喜欢$timeout(function () { /* ... */ });

【解决方案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;
    }
};

这个问题类似：How to set scope property with ng-init?

【讨论】：

【解决方案3】：

在将 pageTitle 变量添加到 $scope 对象之前创建控制器。

【讨论】：

【解决方案4】：

由于您正在执行“单次初始化”，因此我建议您在使用变量后取消绑定手表：

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

【讨论】：