Почему я должен использовать изолированную область?

Question

Я создаю директиву, которая нуждается в некоторых данных из родительского контроллера. Помещение данных в контроллер в scope лайк $scope.data = myData; делает данные доступными в директиве. Я видел, что для передачи данных от контроллера к директиве мы используем изолированную область видимости. Но вот почему я должен использовать изолированную область для этого.? Это только для целей стандартизации?

Answer 1

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

Если вы используете унаследованную область, это означает, что вы будете искать значение в области родительской области, что уменьшит возможность повторного использования ваших компонентов. Как вы сможете использовать дважды одинаковые компоненты с разными данными при использовании данных из родительской области? Ты просто не можешь.

Обратите внимание, что вы также можете использовать атрибуты (attrs параметр в функции ссылки) для чтения значений. Но требуется всегда следить за изменениями, чтобы обновить вид вашего компонента. Когда вы используете связывание, вам это тоже не нужно, если только у вас нет какого-то определенного процесса.

В качестве примера, скажем, вы создали директиву, чтобы сделать текст жирным. Если вы используете изолированную область, вам нужно будет сделать следующее:

scope:{
   text:'@myText'
}, 
template : <strong>{{text}}</strong>

Теперь, если вы используете атрибуты, вам придется сделать это:

scope:false, 
template : <strong>{{text}}</strong>
link:function(scope, element, attrs){
    attrs.$observe('myText', function(newValue){
       scope.text = newValue;
    });
}

Что заставляет вас писать больше кода, а не полагаться на angularJS, так что больше шансов для вставки ошибок.

РЕДАКТИРОВАТЬ: вот еще один пост с довольно хорошим ответом о интерполяции и разборе: использование $attrs для оценки атрибута с фигурными скобками в нем

Answer 2

Код JavaScript:

var app = angular.module("test",[]);

app.controller("Ctrl1",function($scope){
    $scope.name = "Harry";
    $scope.reverseName = function(){
        $scope.name = $scope.name.split('').reverse().join('');
    };
});
app.directive("myDirective", function(){
    return {
        restrict: "EA",
        scope: {},
        template: "<div>Your name is : {{name}}</div>"+
        "Change your name : <input type='text' ng-model='name'/>"
    };
});

HTML:

<div ng-app="test">

    <div ng-controller="Ctrl1">
        <h2 ng-click="reverseName()">Hey {{name}}, Click me to reverse your name</h2>
        <div my-directive class='directive'></div>
    </div>
</div>

Мы только что создали директиву с изолированной областью действия. Обратите внимание, что даже родительская область имеет имя "Гарри", текстовое поле внутри директивы пустое. Это потому, что новая Изолированная область не знает ничего о родительской области.

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

Да! Мало того, нам может понадобиться обрабатывать ситуации, такие как вызов обратных вызовов в родительской области, двустороннее связывание между родительской областью и областью директив..etc

Чтобы получить доступ к любым данным родительской области, нам нужно явно передать это нашей директиве. Это достигается путем установки свойств объекта области в DDO. Представьте эти свойства как интерфейсы директивы для связи с внешней областью. Еще одна важная вещь заключается в том, что эти свойства также ДОЛЖНЫ быть установлены в качестве атрибутов элемента html директивы.

Посмотрите на шаблон директивы, и мы увидим, что там используются свойства области действия. В основном шаблоны директивы и функция ссылки будут использовать свойства области видимости. Поведение этих свойств снова зависит от их значений - также известных как префиксы - предоставленных. Эти префиксы используются для привязки методов и свойств родительской области к области действия директивы.

1. "@" (Привязка текста / односторонняя привязка)
2. "=" (Прямая привязка модели / двусторонняя привязка)
3. "&" (Привязка поведения / привязка метода)

Префикс "@" является односторонней связью между областью действия директивы и родительской областью. Он всегда ожидает, что сопоставленный атрибут будет выражением. Это очень важно; потому что для того, чтобы префикс "@" работал, нам нужно обернуть значение атрибута внутри {{}}. Поскольку "@" создает одностороннюю привязку между родительской областью и областью действия директивы, любые изменения, сделанные в родительской области, будут отражаться внутри области действия директивы, но не другим способом. Префикс "@" действительно полезен, когда наша директива должна быть инициализирована с некоторыми данными из родительской области видимости.

Во-вторых, у нас есть префикс "=". Это создает двустороннюю привязку между родительской и директивной областью действия. Наиболее важный момент, связанный с префиксом "=", заключается в том, что он всегда будет ожидать, что значением атрибута будет имя модели. Это означает, что вы не можете предоставить выражение в качестве значения атрибута, сопоставленного с префиксом "=". Это полезно, когда любое из наших свойств области действия директивы должно совпадать с родительским свойством области действия.

Наконец, мы поговорим о последнем префиксе. Префикс "&" также известен как привязка метода. Это используется для привязки любых методов из родительской области к области директивы. Это будет особенно полезно, когда нашей директиве необходимо выполнить любые обратные вызовы в родительской области видимости. Посмотрите на код, чтобы увидеть, как установить значение атрибута для префикса "&".

Пожалуйста, обратитесь к ссылке ниже, чтобы получить представление об изолированной области в угловой JS.

https://www.undefinednull.com/2014/02/11/mastering-the-scope-of-a-directive-in-angularjs/