Использование символов '@', '&', '=' и ' > ' в привязке области действия пользовательской директивы: 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:'>'" была проблема в моем проекте, и она была исправлена.

652   5  

5 ответов:

в директиве 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 и означает один из способов привязки.

95  
2017-03-16 20:49:53

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

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

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

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

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

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

140  
2017-01-03 21:03:30

<:>

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

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

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

18  
2017-12-04 12:02:04

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

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

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

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

scope: '@'

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

scope: {
    myProperty: '@'
}

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

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

свойство scope может иметь значение true, object или falsy:

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

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

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

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

2  
2017-02-14 02:07:52

Comments

    Ничего не найдено.
Click here to cancel reply.