AngularJs Scope (область применения)
Область - это связь между HTML (View) и JavaScript (контроллер).
Область - это объект с доступными методами и свойствами.
Область может быть применена на представлениях и контроллерах.
Как использовать область
Когда вы создаете контроллер в AngularJS, вы можете передать объект $ accope в качестве параметра:
AngularJs Extance
Свойства в контроллере соответствуют свойствам в представлении:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-pp = "myapp" ng-controller = "myctrl"> {{carname}} </div> <script> var app = angular.module ('myApp', []); app.controller ('myctrl', function ($ scope) {$ acpope.carname = "volvo"; соответствует имени, используемому в представлении в {{}}. </p> </body> </htmlРезультаты работы:
Volvo
Создайте имя атрибута «Carname» в контроллере, которое соответствует имени, используемому в представлении в {{}}.
При добавлении объекта $ scope в контроллер представление (HTML) может получить эти свойства.
В представлении вам не нужно добавлять префикс $ scope, вам просто нужно добавить имя атрибута, например: {{carname}}.
Обзор области
Angularjs применение состав следующего:
View (View), то есть html.
Модель, данные, доступные в текущем представлении.
Контроллер, то есть функция JavaScript, может добавлять или изменять свойства.
Область - это модель.
Scope - это объект JavaScript со свойствами и методами, которые можно использовать в представлениях и контроллерах.
AngularJs Extance
Если вы измените представление, модель и контроллер также будут обновлены соответственно:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-pp = "myapp" ng-controller = "myctrl"> <input ng-model = "name"> Мое имя {{name}} </div> <script> var app = angular.module ('myApp', []); app.controller ('myctrl', function ($ scope) {$ scope.name. Значение в поле ввода, это повлияет на модель, и, конечно, оно также повлияет на соответствующее значение атрибута контроллера. </p> </body> </html>Результаты работы:
Меня зовут Джон Доу
Когда вы изменяете значение в поле ввода, оно повлияет на модель, и, конечно, оно также повлияет на соответствующее значение атрибута контроллера.
Область применения
Очень важно знать, кафе, которую вы используете в настоящее время.
В двух вышеупомянутых случаях есть только одна область прицела, поэтому его относительно просто обрабатывать. Однако в крупных проектах в HTML DOM есть несколько областей. В настоящее время вам нужно знать, какая область, соответствующая использованию областей.
AngularJs Extance
Когда мы используем директиву NG-Repeat, каждый дубликат обращается к текущему дубликату объекта:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-pp = "myapp" ng-controller = "myctrl"> <ul> <li ng-repeat = "x in names"> {x}} </li> </ul> </div> <script> var app = angular.module ('myApp', []); App.controller ('myCtrl', function ($ scope) {$ "Linus"];}); </script> </body> </html>Результаты работы:
Каждый элемент <li> может получить доступ к текущему дубликату объекта, который соответствует строке и представлен переменной x.
Корневая область
Все приложения имеют $ rootcope, который можно использовать во всех элементах HTML, содержащихся в директиве NG-APP.
$ ROOTSCOPE может использоваться на протяжении всего приложения. Это мост сфера в каждом контроллере. Значения, определенные с помощью Rootscope, могут использоваться в каждом контроллере.
AngularJs Extance
При создании контроллера передайте $ rootcope в качестве параметра и может использоваться в приложении:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-pp = "myapp" ng-controller = "myctrl"> Фамилия-{{lastname}} члены семейства: <ul> <li ng-repeat = "x in names"> {x}} {{{lastname}} </li> </ul> </div> <script> var app = angular.module ('my> []); app.controller ('myctrl', function ($ scope, $ rootcope) {$ scope.names = ["emil", "tobias", "linus"]; $ rootscope.lastname = "refsnes";}); </script> <p> Обратите внимание, что $ rootscope может быть доступен как внутри, так и снаружи. </p> </body> </html>Результаты работы:
Фамилия является членом семьи Refsnes:
Обратите внимание, что $ rootcope доступен как внутри, так и за пределами объекта петли.