ng-Controller 语法 -- 别名的用途是什么

Question

我不明白如何使用控制器AS语法。在我的演示应用程序中，我有一个具有以下语法的视图控制器：

ng-controller="mainController as ctrl"

在该 HTML 的范围内，我有以下代码：

<h2>{{ ctrl.person.name }} <small>{{ ctrl.person.jobTitle }}</small></h2>
  <p class="lead"><a href="mailto:{{ ctrl.person.email }}">{{ ctrl.person.email }}</a></p>

尽管将控制器别名设置为"ctrl"，但我的表达式仍无法打印。仅当我从"主控制器"控制器中删除"ctrl"别名时，表达式才会打印。

我想我不明白范围是如何工作的。这是我在结束正文标签处的 js 脚本：

<script type="text/javascript">
var directory = angular.module('directory', []);
directory.controller('mainController', ['$scope','$http',
  function($scope, $http) {
    $http.get('roster.json').success(function(data) {
      $scope.people = data;
      $scope.peopleOrder = 'name';
    });
  }
]);</script>

我的 plunker 链接在这里。有人可以帮我说明原因吗？谢谢

Answer 1

本文将为您指出解决问题的正确方向。

它的要点是，使用控制器作为语法，您不再使用 $scope ，而是this。

首先，您的路由器必须知道：

.state('main', {
    url: '/',
    templateUrl: '...',
    controller: 'mainController',
    controllerAs: 'ctrl'
})

然后，数据绑定发生在this而不是$scope，所以这个片段：

$scope.people = data;
$scope.peopleOrder = 'name';

。成为：

this.people = data;
this.peopleOrder = 'name';

然后，在您的视图中，您可以访问数据：

<pre>{{ people }}</pre>

我假设 people 是一个数组，所以你必须使用 ngRepeat 进行迭代。