Как изменяется переменная scope $ scope в угловых js?

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

Угловые используют инъекции зависимостей. $ 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.

Контроллер инъекционный (и поддерживает кронштейн нотации) со следующими> местными жителями:
*
* * $scope - Текущая сфера, связанная с элементом

Так что, когда вы используете этот код

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

Что вы делаете доступа к контроллеру 'PhoneListCtrl от поставщика контроллера, d затем предоставленная функция вызывается с соответствующей областью, сохраненной с PhoneListCtrl для этого модуля.

С особым отношением к имени переменной $scope, причина, по которой угловой может определить, используете ли вы это «ключевое слово», - это процесс регулярного выражения. Если вы используете .toString() для функции, она преобразует всю вещь в строку, и вы сможете ее проанализировать, чтобы увидеть, что было в этой функции. Угловая делает это,

«Простейшая форма является извлечение зависимости от аргументов функции. Это делается путем преобразования функции в строку с помощью метода toString() и извлечения имен аргументов.»

Регулярное выражение определяется в угловой, как var FN_ARGS = /^function\s*[^\(]*\(\s*([^\)]*)\)/m; Вы можете проверить с помощью этого на https://regex101.com/r/qL4gM8/1

Так что, как Угловое знает, что вы использовали в ваших параметрах функции переменной $scope.

Answer 2

Все в угловых началах с $ - это область обслуживания, которая также является сервисом, который связывает представление с контроллером и позволяет вам использовать TWO WAY BINDING.

Да $ scope ограничен конкретным компонентом, который мы можем сказать, директивой или контроллером. Но у нас есть отпечаток отложений, а также $ rootScope.

Таким образом, вы можете использовать $ rootScope как услугу для глобального контента.

Надеюсь, он очистит ваши сомнения.

несколько ссылок, которые помогут в следующем: -

Github (Лучший ресурс)

Doc

Answer 3

От AngularJS Docs:

Область является клей между контроллером приложений и вид ... Оба контроллера и директивы имеют ссылку t o область действия, но не друг другу.

$ scope создается угловым и инъецированным (впрыском зависимостей) в функцию вашего контроллера с помощью функции refference.

Подумайте об этом простом яваскрипта образце затем расширить свои мысли 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