1. Что такое область?
Scope (http://code.angularjs.org/1.0.2/docs/api/ng.$rootscope.scope) является объектом, указывающим на модель приложения. Это также контекст исполнения выражения (http://www.cnblogs.com/lclao/archive/2012/09/16/2687162.html). Прицел помещается в иерархию структур DOM, аналогичную инициативе применения. Область может отслеживать (часы, $ watch) события выражения и распространения.
2. Характеристики масштаба
3.
Область - это связь между контроллером приложения и представлением. На стадии связывания шаблона (http://www.cnblogs.com/lclao/archive/2012/09/04/2669802.html), директива (http://www.cnblogs.com/lclao/archive/2012/09/09/267190.com/lclao/archive/2012/09/267190.h.harchive/2012/09. объем. $ watch позволяет директиве знать изменения в атрибутах, поэтому директива делает обновленное значение в DOM.
Как контроллеры, так и директивы имеют ссылку на область применения, но не друг друга. Это расположение отделяет контроллер от директивы и DOM. Это важное место, потому что оно изолирует контроллер от представления, значительно улучшая историю тестирования приложений.
<! Doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <title> data-model </title> <style type = "text/css"> .ng-cloak {show: none; } </style> </head> <body> <div ng-controller = "myController"> Ваше имя: <input type = "text" ng-model = "username"/> <button ng-click = "sayhello ()"> добро пожаловать </button> <hr/> {{greeting}} </div> <cript srpt src = "../{{greeting}} </div> <fcript srcc.0.0. type = "text/javascript"> </script> <script type = "text/javascript"> function myController ($ scope) {$ scope.username = "my Little Dada"; $ scope.sayhello = function () {$ scope.greeting = "hello ~" + $ scope.username + "!"; }; } </script> </body> </html>В приведенном выше примере мы можем заметить, что MyController присваивает атрибут имени пользователя по объему «My Little Dada». Затем Scope уведомляет вход для назначения и предварительно заполняя значение имени пользователя на вход. Это показывает, как контроллер может записать данные в область прицела.
Точно так же контроллер может прикрепить поведение к областям, как и метод Sayhello, который запускается, когда пользователь нажимает кнопку «Приглашать». Метод Sayhello может прочитать атрибут имени пользователя или создать атрибут приветствия. Это показывает, что когда они связаны с управлением вводами HTML, свойства в области объема автоматически обновляются.
Логически, отображение {{приветствие}} включает в себя следующие две точки:
Область поиска с шаблоном узла DOM, который определяет выражение {{приветствие}}. В этом примере эта область такая же, как сфера, проходящая в MyController. (Позже обсудим иерархию охвата)
Выражение приветствия оценивается с помощью прицела, полученной ранее, и затем результат используется в качестве значения текста, который прилагает элемент DOM.
Мы можем думать, что Scope и его собственные свойства могут быть использованы в качестве данных для визуализации. Область является единственным источником правдоподобия для всех вещей, связанных с видом.
С точки зрения тестируемости, разделение контроллера и представления в восторге, поскольку оно позволяет нам (фокусироваться на) тестировании поведения без вмешательства в детали рендеринга.
это ('должен сказать привет', function () {var scopemock = {}; var cntl = new myController (scopemock); // утверждают, что имя пользователя предварительно заполнено (scopemock.username) .toequal ('world'); // утверждаем, что мы читаем newsername and greet scopemock.username = '; Ожидайте (scopemock.greeting) .toequal ('Привет angular!');});4. Иерархии областей (иерархии охвата)
Каждое угловое применение имеет и только один корень, но может иметь несколько прицелов для детей.
Приложение может иметь несколько дочерних областей, потому что некоторые директивы будут создавать новые прицелы для детей (см. Директивную документацию, чтобы увидеть, какие директивы могут создавать новые области, такие как NG-Repeat). Когда создается новый объем, они будут добавлены в родительский прицел в качестве детского масштаба. Таким образом, создается структура дерева, похожая на DOM, который они прикреплены.
Когда Angular оценивает {{username}}, он сначала смотрит на свойство имени пользователя прицела, связанное с текущим элементом. Если соответствующее свойство не найдено, оно будет искать вверх для родителей, пока не достигнет корневой области. В JavaScript это поведение называется «прототип наследование», а объем ребенка обычно наследуется от их родителей.
Этот пример показывает область применения (что это) и прототип наследование свойств в приложении.
<! Doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "UTF-8"> <Title> Scope-hierarchies </title> <style type = "text/css"> .ng-cloak {display: none; } .ng-scope {border: 1px пунктир красный; } </style></head><body><div ng-controller="MyController"> Manager: {{employee.name}} [{{department}}] <br/> Report: <ul> <li ng-repeat="employee in employee.reports"> {{employee.name}} [{{department}}] </li> </ul> <hr/> {{приветствие}} </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> функция myController ($ scope) {$ scope.department = "aely Unit"; $ scope.employee = {name: "my little dada", отчеты: [{name: "lclao"}, {name: "Кто^o^"}]}; } </script> </body> </html>Обратите внимание, что Angular автоматически помещает класс NG-Scope в элементы, которые придерживаются масштаба. <style> определяется в примере выше, подчеркивая диапазон новой области через красную пунктирную линию. Поскольку ретранслятор оценивает выражение {{employee.name}}, необходим детский объем, но в зависимости от того, какой объем оценивается выражение, разные области имеют разные результаты. Точно так же значение {{отделение}} наследуется от прототипа в корне. Только когда это есть, может быть определен атрибут департамента.
5. Получение областей с DOM (извлечь область из DOM)
Область прикреплена к DOM в качестве атрибута данных $ Scope и может использоваться для поиска в целях отладки. (Таким образом, в приложении невозможно получить область. Обычно Ng-App помещается в элемент <html>, но его также можно помещать в другие элементы, например, только часть вида должна контролироваться угловым.
Посмотреть область применения в отладчике:
1. В браузере щелкните правой кнопкой мыши интересный вами элемент и выберите «Элемент просмотра». Мы видим, что отладчик браузера выделяет элементы, которые мы выбрали.
2. Debugger позволяет нам получить доступ к выбранному в настоящее время элементу через переменную $ 0 в консоли.
3. Если вы хотите просмотреть соответствующую область, мы можем ввести: angular.element ($ 0) .scope () в консоли
6. Распространение событий (размножение событий) (распространение событий)
Область может распространять события так же, как и события DOM. События могут быть транслированы (http://code.angularjs.org/1.0.2/docs/api/ng.$rootscope.scope#$broadcast) для детей или эмит (http://code.angularjs.org/1.0.2/docs/api/ng.drotscope.scope.scope. (Если текущая область прослушивается, он также будет выполнен)
<! Doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "UTF-8"> <Title> Scope-EVENT-Propagation </title> <Style Type = "text/css"> .ng-croak {display: none; } </style> </head> <body> <div ng-controller = "myController"> CORT Sacpe Count: {{count}} <ul> <li ng-repeat = "i in [1]" ng-controller = "myController"> <Tood ng-click = "$ eMit (myEev ')"> $ emit emit "/$"/eMit "/$"/emit "/$"/emit "/$"/emit "/$") ng-click = "$ broadcast ('myevent')"> $ broadcast ("myevent") </button> <br/> Средний сфере объемов: {{count}} <ul> <li ng-repeat = "Item In [1,2]" ng-controller = "myController"> scope scope: {{count}}}}} <//> <//li> <//> <//li> </ul> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> myController ($ scope) {$ scope.count = 0; $ scope. $ on ("myevent", function () {$ scope.count ++;}); } </script> </body> </html>7. Жизненный цикл сфера (жизненный цикл области)
В обычном потоке событий браузера, когда браузер получает событие, он выполнит соответствующий обратный вызов JavaScript. Как только функция обратного вызова будет выполнена, браузер перераспределяет DOM и вернется в состояние, где вы продолжаете ждать события.
Когда браузер вызывает код JavaScript за пределами среды углового выполнения, это означает, что Angular не знает изменения модели. Чтобы правильно обработать модификацию модели, эта команда должна ввести среду углового выполнения, заставив метод применения $. Только когда модель изменяется в методе применения $, будет правильно подсчитываться Angular. Например, директива прослушивает событие DOM, такое как NG-клик, который должен оценить выражение в методе применения $.
После оценки выражения метод применения $ выполняет $ digest. На стадии $ Digest Scope проверяет все выражения, выслушиваемые $ watch, и сравнивает текущее значение со старым значением. Грязная проверка асинхронна. Это означает, что оператор назначения (например, $ scope.username = "angular") не сразу же приведет к уведомлению $ часа, но уведомление о часах $ будет отложено на стадию $ Digest. Эта задержка необходима, потому что она объединяет несколько модельных обновлений в уведомление $ watch, что гарантирует, что никакие другие $ watch не выполняются в процессе уведомления $ Watch. Если A $ Watch изменит стоимость модели, это усилит увеличение цикла A $ Digest.
1) Создание (создать область)
Корневая область создается инжектором $ (http://code.angularjs.org/1.0.2/docs/api/auto.$ninjector) во время процесса запуска приложения. Во время процесса связывания шаблона некоторые директивы создадут новую детскую область.
2) Регистрация наблюдателя (регистрация наблюдателя)
Во время процесса связывания шаблона директива регистрирует $ watch по объему. Эти часы будут использоваться в качестве значения распространения модели в DOM.
3) Модельная мутация (изменения модели)
Для правильного обнаружения изменений мы должны обернуть их по объему. $ Применить. (Angular API сделал это неявно, поэтому при выполнении синхронной работы в контроллере или асинхронной работы с $ http или $ timeout не требуется дополнительного применения применения $).
4) Наблюдение за мутациями (мониторинг изменений)
В конце $ применяется, Angular выполнит цикл A $ Digest в корневом масштабе, который будет распространяться на все сферы детей. В цикле $ Digest все выражения или функции, зарегистрированные в $ Watch, будут проверены, чтобы определить, изменилась ли модель. Если произойдет изменение, будет вызван соответствующий слушатель $ Watch.
5) Разрушение областей (разрушение сферы)
Когда детские масштабы больше не требуются, производитель детей -масштабов обязан уничтожить их через область API Discope. Это остановит распространение вызовов $ Digest Call в прицел для детей, так что память, используемая моделью с масштабами дочернего действия, может быть переработана GC (Collector Marbage).
1. Прицелы и директивы
На этапе компиляции компилятор полагается на директиву соответствия шаблонов DOM. Директивы обычно можно разделить на две категории:
Наблюдая директивы, такие как выражение Dobule-Curly {{Expression}}, зарегистрируйте слушатель, используя метод $ Watch. Всякий раз, когда изменяется выражение (значение), такие директивы должны быть уведомлены об обновлении представления.
Директива слушателя, такая как NG-клик, регистрирует слушателя в DOM. Когда слушатель DOM стреляет, директива выполняет соответствующее выражение и обновляет представление, используя метод $ Apply.
Когда внешнее событие (такое как действие пользователя, таймер или XHR) услышано, соответствующее выражение должно быть применено к сфере областей с помощью метода применения $, чтобы все слушатели могли быть правильно обновлены.
2. Директивы, которые создают области
В большинстве случаев, директива и масштабы оказали взаимно влияют, но новый экземпляр масштаба не создан. Тем не менее, некоторые директивы (такие как NG-контроллер и NG-Repeat) создают новую область, добавляя пример ребенка к соответствующему элементу DOM. Мы рассматриваем область любого элемента DOM с использованием Angular.Element (AdomeLement) .scope ().
3. Контроллеры и области
В следующих случаях объем и контроллер влияют друг на друга:
4. Соображения по производительности Scope $ Watch (соображения производительности Scope $ Watch)
В Angular это обычная операция для выполнения грязной проверки на область применения для обнаружения изменений в атрибутах. Для этого требуется, чтобы грязная функция проверки была эффективной. Будьте осторожны с тем, что грязные функции проверки не выполняют никаких операций доступа DOM, потому что доступы DOM на уровне порядков медленнее, чем доступ к свойствам объекта JavaScript.
Выше приведено информация о сфере Angularjs. Мы будем продолжать добавлять соответствующую информацию в будущем. Спасибо за поддержку этого сайта!