Какво представлява $ Scope в AngularJS? Урок с пример

Съдържание:

Anonim

Какво представлява $ scope в AngularJS?

$ scope в AngularJS е вграден обект, който основно свързва "контролера" и "изгледа". Може да се дефинират променливи на членове в обхвата в контролера, които след това могат да бъдат достъпни от изгледа.

Помислете за пример по-долу:

angular.module('app',[]).controller('HelloWorldCntrl'function($scope){$scope.message = "Hello World"});

Обяснение на кода:

  1. Името на модула е "приложение"
  2. Името на контролера е "HelloWorldCntrl"
  3. Обектът за обхват е основният обект, който се използва за предаване на информация от контролера към изгледа.
  4. Член променлива е добавена към обекта на обхвата

Настройване или добавяне на поведение

За да реагираме на събития или да изпълним някакво изчисление / обработка в изгледа, трябва да осигурим поведение на обхвата.

Поведението се добавя към обектите на обхвата, за да отговори на конкретни събития, които могат да бъдат задействани от изгледа. След като поведението е дефинирано в контролера, то може да бъде достъпно от изгледа.

Нека разгледаме пример за това как можем да постигнем това.

Guru99

Guru99 Global Event


{{fullName("Guru","99")}}

Обяснение на кода:

  1. Ние създаваме поведение, наречено "пълно име". Това поведение е функция, която приема 2 параметъра (firstName, lastname).
  2. След това поведението връща конкатенацията на тези 2 параметъра.
  3. В изгледа ние извикваме поведението и предаваме 2 стойности на "Гуру" и "99", което се предава като параметри на поведението.

Ако командата се изпълни успешно, след стартиране на вашия код в браузъра ще се покаже следният изход.

Изход:

В браузъра ще видите конкатенация на двете стойности на Guru & 99, които са предадени на поведението в контролера.

Обобщение

  • Различни променливи на членове могат да бъдат добавени към обекта на обхвата, който след това може да бъде препратен в изгледа.
  • Поведението може да бъде добавено за работа със събития, които се генерират за действия, извършени от потребителя.
  • Angularjs $rootScopeе обхватът на цялото приложение. Приложението може да има само един $ rootScope и се използва като глобална променлива. В Angular JS $ обхватите са дъщери, а $ rootScope е родителски обхват