在控制器中初始化嵌套的作用域变量

AngularJS: Initialize nested scope variables in controller

本文关键字：作用域 变量 嵌套 初始化 控制器      更新时间：2023-09-26

我喜欢保持模型名称的名称空间干净和描述性，所以我使用嵌套模型变量，像这样(其中月份和年份嵌套在服务中):

<form data-ng-submit="submit()">
  <select data-ng-model="service.month" data-ng-options="m for m in months"/>
  <input data-ng-model="service.year"/> {{ service.year }}
  <input type="submit"/>
</form>

在我的控制器中，我想将$scope.service.month和$scope.service.year设置为初始值，但我得到了一个javascript错误Cannot set property 'year' of undefined，所以我猜DOM还没有被解析，所有的$scope变量还没有被创建。我怎么能有一些代码等待运行，直到DOM已经被Angular解析和所有的模型已经创建?

这是我的控制器:

mod.controller('AddServiceCtrl', [
    '$scope', 
    '$rootScope', 
function($scope, $rootScope) {
  var date = new Date();
  $scope.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  $scope.service.year = 2014;   
  $scope.submit = function(){
  };
}])

 $scope.service= {month:'Mar',year:2014};

AngularJS仍然是JavaScript。

不幸的是，AngularJS团队选择将实际的演示器(或视图模型)命名为controller。这听起来可能不那么重要，但从概念上讲，这是为了理解controllers的作用。

问题是$scope.service对象是undefined，所以它未能在控制器内定义year属性，而不是视图。要做到这一点，您必须像这样在作用域中设置service对象:

$scope.service = {};

，那么您可以在控制器或视图中的上为模型定义默认值:

<<p> 控制器选项/strong> 
$scope.service = {};
$scope.service.year = 2014;

或

$scope.service = {
    year: 2014,
    month: $scope.months[3]   // to default to 'Apr'
};
<<p> 视图选项/strong> 
<form data-ng-submit="submit()" 
      data-ng-init="service.year=2014; service.month=months[3]">
    ...
</form>
无论采用哪种方法，您都必须在作用域中创建service对象，以便在其上定义属性。使用对象文字表示法({})来创建它
相关文章：