javascript - angular js中$scope的可变范围如何工作？

Question

我是 Angular JS 的初学者，我在教程中找到了这段代码。

var phonecatApp = angular.module('phonecatApp', []);

phonecatApp.controller('PhoneListCtrl', function($scope) {
  $scope.phones = [
    {'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM™',
     'snippet': 'The Next, Next Generation tablet.'}
  ];
});

此代码运行良好，但我想知道 $scope 的变量范围是如何工作的。从代码来看，$scope 似乎是一个局部变量，它的范围仅限于函数。

那为什么我不能更改 $scope 变量的名称？如果我更改函数内所有出现的变量名，它似乎不起作用

Answer 1

Angular 使用依赖注入(inject)。 $scope 是一个注入(inject)值。它本质上是一个对象，包含该模块的相关 Controller 内的所有 ng- 引用。

"A module is a collection of services, directives, controllers, filters, and configuration information." -angular source

当您访问模块包含的集合中的某些内容时，将注入(inject)该访问的范围。例如，当创建一个模块时，该模块创建一个 Controller 属性

/**
* @ngdoc method
* @name angular.Module#controller
* @module ng
* @param {string|Object} name Controller name, or an object map of controllers where the
 *    keys are the names and the values are the constructors.
 * @param {Function} constructor Controller constructor function.
 * @description
 * See {@link ng.$controllerProvider#register $controllerProvider.register()}.
 */
 controller: invokeLater('$controllerProvider', 'register'),

此属性已向 controllerProvider 注册。

The controller is injectable (and supports bracket notation) with the following >locals:
*
* * $scope - Current scope associated with the element

所以当你使用这段代码的时候

phonecatApp.controller('PhoneListCtrl', function($scope){

您正在做的是从 Controller 提供者访问 'PhoneListCtrl Controller ，然后使用与该模块的 PhoneListCtrl 一起存储的关联范围调用提供的函数.

关于变量名 $scope，angular 可以判断您是否使用此“关键字”的原因是通过正则表达式过程。如果你在一个函数上使用 .toString() ，它会将整个东西转换成一个字符串，然后你可以解析它以查看函数中的内容。 Angular 就是这样做的，

"The simplest form is to extract the dependencies from the arguments of the function. This is done by converting the function into a string using toString() method and extracting the argument names."

正则表达式以 Angular 定义为 var FN_ARGS =/^function\s*[^\(]*\(\s*([^\)]*)\)/m;您可以在 https://regex101.com/r/qL4gM8/1 上使用它进行测试

这就是 Angular 知道您在函数参数中使用了变量 $scope 的方式。