Статьи

Поведение области применения в директивах AngularJS

Июль 15, 2018

Директива — самая крутая и самая важная особенность, предоставляемая AngularJS. Использование свойства scope в директивах усложняет процесс написания директивы. Поведение области зависит от того, как она назначена в директиве. Ниже приведены различные сценарии использования области действия внутри директивы:

  • Область не назначена или не установлена ​​в ложь
  • Область установлена ​​в true
  • Изолированная сфера

Ниже приведен простой контроллер с одним значением, назначенным для
области действия, который мы будем использовать на образце страницы:

var app = angular.module("myApp", []);
 
app.controller("SampleCtrl", ['$scope', function ($scope) {
    $scope.val = 0;
}]);

Давайте посмотрим на каждый из вышеперечисленных сценариев в отдельности.

Scope не назначен или не установлен в false:
рассмотрите следующую директиву: 

app.directive("dirWithoutScope", function () {
    return{
        scope:false,
        link: function (scope, elem, attrs, ctrl) {
            scope.val=20;
        }
    }
});

Поскольку директива не вносит никаких изменений, область действия этой директивы остается такой же, как область действия ее родительского элемента. Оператор в функции ссылки изменяет значение значения свойства, которое устанавливается в контроллере. Оба следующих элемента span будут отображать одинаковое значение, равное 20.

<span>{{val}}</span>
 
<span dir-without-scope>{{val}}</span>


Scope установлен в true:
в этом случае область действия директивы будет прототипно наследоваться от области действия ее родительского элемента. Давайте рассмотрим следующую директиву: 

app.directive("dirWithScopeTrue", function () {
    return{
        scope:true
    }
});

Поскольку область действия наследуется по прототипу, свойства родительской области доступны с помощью этой области. Следующий тег span по-прежнему будет содержать значение, назначенное родительской области: 

<span dir-with-scope-true>{{val}}</span>

Давайте немного усложним сценарий, добавив следующую ссылку в указанную выше директиву: 

link: function (scope, elem, attrs, ctrl) {
    scope.val=25;
}

Значение 25 не присваивается свойству val в родительской области. Вместо этого этот оператор создает новое свойство в дочерней области и присваивает ему значение. Элемент span, созданный выше, теперь будет содержать значение 25.

Если значение задается через свойство $ parent в области, значение присваивается родительской области. 

$scope.$parent.val=25;

Если оператор функции ссылки заменяется приведенным выше оператором, значения во всех элементах span изменятся на 25.

Изолированная область:
если в директиве создается новая область, область больше не наследуется от родительской области. Свойства родительской области недоступны с новой областью. Следующая директива содержит изолированную область: 

app.directive("dirWithBlankScope", function(){
    return{
        scope:{
        },
        link:function(scope, elem, attrs, ctrl){
            scope.val=30;
        }
    }
});

Оператор присваивания в функции ссылки создает свойство val в новой области видимости. Он не изменяет значение свойства, назначенного в контроллере или предыдущей директиве. Следующий диапазон печатает значение нового свойства: 

<span dir-with-new-scope>{{val}}</span>

Свойства области родительского элемента по-прежнему доступны через свойство $ parent области. 

<span dir-with-new-scope>{{$parent.val}}</span>

Удачного кодирования!

37
Share: