AngularJS директивы

Question

Я читал AngularJS документы и нашел то, что я до сих пор не понимаю:

Для случаев, когда имя атрибута является такой же, как значение, которое вы хотите связываться с внутри сфера применения директивы, вы можете использовать этот сокращенный синтаксис:

... 
scope: { 
    // same as '=customer' 
    customer: '=' 
}, 
... 

Глядя на последний пример (мои-вкладки/мой-панель) код это один:

.directive('myPane', function() { 
    return { 
    require: '^myTabs', 
    restrict: 'E', 
    transclude: true, 
    scope: { 
     title: '@' 
    }, 
    link: function(scope, element, attrs, tabsCtrl) { 
     tabsCtrl.addPane(scope); 
    }, 
    templateUrl: 'my-pane.html' 
    }; 
}); 

Я попытался изменить '@' на '=', и пример разбит. Итак, что делает '@'? И почему '=' не '=title' не работает должным образом?

Answer 1

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

Когда вы используете @, вы указываете одностороннюю привязку. Результат всегда будет строкой. Изменения свойства в области директивы не будут влиять на родительскую область (поскольку модель не является ссылкой на свойство родительской области).

В вашем примере свойство title является литеральной строкой, а не ссылкой на свойство в родительской области. Когда вы меняете @ на =, он прерывается, потому что нет свойства с правильным именем в родительской области.

Это подтверждено документом под номером $compile service.

Answer 2

Вы можете посмотреть на compile documentation Есть объяснения для всех трех случаев:

@ или @attr - связать локальное свойство области действия к значению DOM атрибута. Результатом всегда является строка, поскольку атрибуты DOM - это строки . Если имя attr не указано, имя атрибута равно , предполагаемое как локальное имя. Определенное и видимое определение области видимости: {localName: '@ myAttr'}, , тогда свойство области виджета localName будет отображать интерполированное значение приветствия {{name}}. По мере изменения атрибута name будет обладать свойством localName в области виджета. Имя считывается из родительской области (а не области компонента).

В этом случае title является атрибутом, а не переменной.

Answer 3

В AngularJs директиве

Отдельные переменные сферы применения могут быть объявлены тремя способами

1. @ это будет принимать аргумент как строку, даже если это объект/Array/Функция
2. = будет связывать два пути. Таким образом, вы можете получить Object/Array/Function внутри директивы, а изменения внутри директивы будут отражаться в исходной/родительской области.
3. & будет привязан к В противном случае вы можете получить значение атрибута (т.е. Object/Array/Function) внутри директивы, но если вы измените значение, оно не изменит значение атрибута в исходной области

В случае 2 , 3: Если вы не определяете переменные в родительской области, они будут undefined, поэтому определите их правильно.

Вариант 3: Один способ, так что это хороший способ привязать функции обратного вызова к директиве.