it-swarm.com.ru

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

Я много читал об использовании этих символов в реализации пользовательских директив в 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

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

136
MAC

В директиве 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 , хотя и несколько распространена по всей странице.

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

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

105
VRPF

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

< для односторонней привязки.

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

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

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

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

159
Aravind

< односторонняя привязка

= двусторонняя привязка

& привязка функции

@ передавать только строки

32
Timothy.Li

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

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

AngularJS документация по директивам довольно хорошо написана для обозначения символов.

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

scope: '@'

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

scope: {
    myProperty: '@'
}

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

Вот прямая цитата с указанной выше страницы, касающаяся значений scope:

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

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

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

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

Получено 2017-02-13 из https://code.angularjs.org/1.4.11/docs/api/ng/service/ $ compile # -scope-, лицензировано как CC -by-SA 3.

2
Heretic Monkey