Использование символов '@', '&', '=' и '>' в привязке области пользовательской директивы: AngularJS

Question

Я много читал об использовании этих символов при реализации пользовательских директив в AngularJS, но концепция мне все еще не ясно. Я имею в виду, Что это значит, если я использую одно из значений области действия в пользовательской директиве?

var mainApp = angular.module("mainApp", []); 
 
mainApp.directive('modalView',function(){ 
 
    return{ 
 
    restrict:'E', 
 
    scope:'@' OR scope:'&' OR scope:'=' OR scope:'>' OR scope:true 
 
    } 
 
});

Что именно мы делаем с областью здесь?

Я также не уверен, существует ли в официальной документации "scope: '>'". Он был использован в моем проекте.

Edit-1

Использование "сферы: '>'" была проблема в моем проекте, и это было исправлено.

Answer 1

В директиве AngularJS область действия позволяет вам получить доступ к данным в атрибутах элемента, к которому применяется директива.

Это лучше всего проиллюстрировано на примере:

<div my-customer name="Customer XYZ"></div> 

и определение директивы:

angular.module('myModule', []) 
.directive('myCustomer', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     customerName: '@name' 
    }, 
    controllerAs: 'vm', 
    bindToController: true, 
    controller: ['$http', function($http) { 
     var vm = this; 

     vm.doStuff = function(pane) { 
     console.log(vm.customerName); 
     }; 
    }], 
    link: function(scope, element, attrs) { 
     console.log(scope.customerName); 
    } 
    }; 
}); 

Когда scope свойство используется директива находится в режиме так называемой «изоляции области видимости», что означает, что он не может напрямую обращаться к области родительского контроллера.

В очень простых словах, значение обязательных символов:

someObject: '=' (двусторонний привязка данные)

someString: '@' (передается непосредственно или посредством интерполяции с двойными фигурными скобками обозначением {{}})

someExpression: '&' (например,hideDialog())

Эта информация присутствует в AngularJS directive documentation page, хотя несколько распространяется по всей странице.

Символ > не является частью синтаксиса.

Однако < действительно существует как часть AngularJS component bindings и означает одностороннюю привязку.

Answer 2

> не содержится в документации.

< предназначен для односторонней переплета.

@ обязательный для передачи строк. Эти строки поддерживают выражения {{}} для интерполированных значений.

= обязательный для двусторонней связи. Модель в родительской области связана с моделью в изолированной области действия директивы.

& обязательный для передачи метода в область действия вашей директивы, чтобы он мог быть вызван внутри вашей директивы.

Когда мы устанавливаем область действия: true в директиве, Angular js создаст новую область для этой директивы. Это означает, что любые изменения, внесенные в область действия директивы, не будут отражаться в родительском контроллере.

Answer 3

AngularJS documentation on directives довольно хорошо написан для обозначения символов.

Чтобы быть ясно, вы не можете просто

scope: '@' 

в определении директивы. Вы должны иметь свойства, для которых эти привязки применяются, как:

scope: { 
    myProperty: '@' 
} 

Я настоятельно рекомендую вам прочитать документацию и обучающие программы на сайте. Существует гораздо больше информации, которую вам нужно знать об изолированных областях и других темах.

Вот прямая цитата из приведенной выше-сшитой страницы, в отношении значений scope:

Свойство Объема может быть истинным, объект или falsy значение:

• falsy: Никакой объем не будет создан для этой директивы. Директива будет использовать область его родителя.

• true: Для элемента директивы будет создан новый дочерний объект, который прототипно наследует от его родителя. Если несколько директив одного элемента запрашивают новую область, создается только одна новая область. Новое правило области не применяется для корня шаблона, так как корень шаблона всегда получает новую область.

• {...}(объект хэш): Новая «изолировать» сфера создается для элемента в директивах. Область «isolate» отличается от обычной области видимости тем, что она не прототипически наследуется от родительской области. Это полезно при создании повторно используемых компонентов, которые не должны случайно считывать или изменять данные в родительской области.

^{Источник 2017-02-13 от https://code.angularjs.org/1.4.11/docs/api/ng/service/ $ компилировать # -scope-, лицензировано как CC-by-SA 3.0}

Answer 4

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

1. Данные могут передаваться в виде строки с использованием строкового литерала @, передать значение строки, одностороннюю привязку.
2. Данные могут передаваться как объект с использованием строкового литерала =, передать объект, 2 способа связывания.
3. Данные могут передаваться как функция, строковый литерал &, вызывает внешнюю функцию, может передавать данные из директивы в контроллер.

Answer 5

<: одностороннее связывание

=: двухстороннее связывание

&: функция связывания

@: пройти только строки