Question

我是角度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

来自AngularJS文件：

Scope是应用程序控制器和视图之间的粘合剂 ... 控制器和指令都参考了范围，但没有彼此。

$ scope由angular和注入（依赖注入）通过refference创建到控制器函数中。

想想这个简单的javascript示例，然后将你的想法扩展到AngularJS

(function() {
     // var myscope is not global. it's in the closure
     // of my anonymous function
     var myscope = {
        "samplekey" : "samplevalue"
     }

     // .... You can do anything with scope

     // Imagine this function as your controller
     function myController($scope) {
        // Here I can work with $scope variable
        $scope.data = { "anotherkey" : "anothervalue" };
        console.log($scope.samplekey); // It works fine
     }

     // inject myscope into the controller function
     myController(myscope);

     // I can access the new property added to myscope variable
     // by the controller function (maybe I can use it in a view).  
     console.log(myscope.data.anotherkey); // anothervalue 

}());

您也可以在AngularJS中使用您想要的任何变量作为范围。但是您必须指定您创建的变量引用范围变量。

phonecatApp.controller('PhoneListCtrl',['$scope', function(varAsScope) {
  varAsScope.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.'}
  ];
}]);

这是Working Example

Answer 2

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

“模块是服务，指令，控制器，过滤器和配置信息的集合。” - angular source

当您从模块包含的集合中访问某些内容时，将注入该访问的范围。例如，创建模块时，模块会创建控制器属性

/**
* @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中注册。

控制器是可注射的（并支持括号表示法），带有以下＆gt;本地人：
  *
  * * $scope - 与元素相关的当前范围

所以当你使用这段代码时

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

您正在做的是从控制器提供程序访问'PhoneListCtrl控制器，然后调用所提供的函数，并将相关范围与该模块的PhoneListCtrl一起存储。

关于变量名$scope的具体问题，角度可以判断您是否使用此“关键字”的原因是通过正则表达式过程。如果在函数上使用.toString（），它会将整个事物转换为字符串，然后您可以解析它以查看函数中的内容。 Angular这样做，

“最简单的形式是从函数的参数中提取依赖项。这是通过使用toString()方法将函数转换为字符串并提取参数名称来完成的。”

正则表达式以角度定义为var FN_ARGS = /^function\s*[^$]*\(\s*([^$]*)\)/m;您可以在https://regex101.com/r/qL4gM8/1

处使用此功能进行测试

enter image description here

这就是Angular如何知道你在函数参数中使用了变量$scope。

Answer 3

以角度开头的所有内容都以$开头，这里的服务范围也是将视图与控制器绑定并允许您使用两个绑定的服务。

是$范围仅限于我们可以说指令或控制器的特定组件。但我们还有父亲的范围以及$ rootScope。

因此，您可以将$ rootScope用作全局资源的服务。

希望它能清除你的怀疑。

以下几个有用的链接： -

Github（最佳资源）

Doc

角js中$ scope的可变范围如何工作？

3 个答案: