角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 （最佳資源）

文件