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

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由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.'}
  ];
}]);

这是一个工作示例

Answer 2

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

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

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

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

控制器是可注射的（并支持括号表示法），具有以下>本地人：
*
* * $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上使用此功能进行测试

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

Answer 3

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

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

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

希望它能清除你的怀疑。

几个有用的链接如下： -

Github （最佳资源）

文件