AngularJS 文档教程中关于 $controller 服务的问题答案

【问题标题】：Question about $controller service in AngularJS documentation tutorialAngularJS 文档教程中关于 $controller 服务的问题
【发布时间】：2019-08-01 03:47:53
【问题描述】：

此代码来自https://docs.angularjs.org/tutorial/step_02。我只是想知道为什么 scope.phones.length 属性是 3 而不是 0，因为 scope 是一个空对象。我不确定这条线在做什么：

var ctrl = $controller('PhoneListController', {$scope: scope});

它看起来像是将控制器中的 $scope 设置为空范围对象。

describe('PhoneListController', function() {

  beforeEach(module('phonecatApp'));

  it('should create a `phones` model with 3 phones', inject(function($controller) {
    var scope = {};
    var ctrl = $controller('PhoneListController', {$scope: scope});

    expect(scope.phones.length).toBe(3);
  }));

});

【问题讨论】：

$controller 是一个调用控制器的服务。在这种情况下，它调用PhoneListController。在本教程中，此时有一个 $scope.phones 数组，其中 PhoneListController 内有 3 个元素。
这是做什么的？ {$scope: scope}
在控制器中注入 $scope 依赖项。你看到PhoneListController，它有 $scope 作为依赖
我刚刚在教程中看到了这一点：控制器只是一个带有 $scope 参数的构造函数。 在这种情况下，范围是参数，然后是 @987654331 @ 是在控制器内部完成的，对吗？无论如何，您可以将其发布为答案，我会接受。

标签： angularjs angularjs-controller

【解决方案1】：

在这里您可以创建具有预定义范围的控制器

var scope = {};
var ctrl = $controller('PhoneListController', {$scope: scope});

当控制器启动时，它的代码如下：

$scope.phones = [...]

所以当它执行时，它会放入包含 3 个项目的 'phones' 数组中。

您可以尝试使用它并将一些预定义的值放入范围：

var scope = {foo: 'bar', phones: [1,2,3]};
var ctrl = $controller('PhoneListController', {$scope: scope});

phonecatApp.controller('PhoneListController', function PhoneListController($scope) {
  console.log(foo) // 'bar'
  console.log(phones) // [1,2,3]

  $scope.phones = [
   {name: 'Nexus S'}
  ]

  console.log(phones) // [{name: 'Nexus S'}] here will be an array what we just defined to this property

【讨论】：