Яка різниця між "@" та "=" в області застосування директиви в AngularJS?

Я уважно прочитав документацію AngularJS по цій темі, а потім познайомився з директивою. Ось загадка .

Ось кілька відповідних фрагментів:

• З HTML :

  <pane bi-title="title" title="{{title}}">{{text}}</pane>

• З директиви про панель:

  scope: { biTitle: '=', title: '@', bar: '=' },

Є кілька речей, які я не отримую:

• Чому я маю користуватися "{{title}}"разом із '@'і "title"з '='?
• Чи можу я також отримати доступ до батьківського діапазону безпосередньо, не прикрашаючи свій елемент атрибутом?
• Документація говорить: "Часто бажано передавати дані з ізольованого діапазону через вираз і в батьківський діапазон" , але це, здається, працює добре і з двосторонньою прив'язкою. Чому маршрут вираження був би кращим?

Я знайшов ще одну загадку, яка також показує рішення виразів: http://jsfiddle.net/maxisam/QrCXh/

Чому я повинен використовувати "{{title}}" з " @ " та "title" з " = "?

@ прив'язує властивість локальної / директивної області до оціненого значення атрибута DOM . Якщо ви використовуєте title=title1або title="title1", значення атрибута DOM "title" - це просто рядок title1. Якщо ви використовуєте title="{{title}}", значення атрибута DOM "title" є інтерпольованим значенням {{title}}, отже, рядок буде будь-яким батьківським властивістю області "title". Оскільки значення атрибутів завжди є рядками, під час використання @ ви завжди будете мати значення рядка для цього властивості в області директиви .

= прив'язує властивість локального / директивної області до властивості батьківського діапазону . Отже з = , ви використовуєте назву батьківської моделі / області властивості як значення атрибута DOM. Ви не можете використовувати {{}}s з = .

За допомогою @ ви можете робити такі речі, як title="{{title}} and then some"- {{title}} є інтерпольованою, тоді рядок "та їх декілька" з'єднується з нею. Заключний об'єднаний рядок - це те, що отримує властивість локальної / директивної області. (Ви не можете зробити це з = , тільки @ .)

З @ вам потрібно буде користуватисяattr.$observe('title', function(value) { ... }) якщо вам потрібно використовувати значення у вашій функції посилання (ing). Наприклад, if(scope.title == "...")не працюватиме так, як ви очікували. Зауважте, що це означає, що ви можете отримати доступ до цього атрибуту лише асинхронно . Вам не потрібно використовувати $ obser (), якщо ви використовуєте лише значення в шаблоні. Наприклад, template: '<div>{{title}}</div>'.

З = , вам не потрібно використовувати $ obser.

Чи можу я також отримати доступ до батьківського діапазону безпосередньо, не прикрашаючи свій елемент атрибутом?

Так, але тільки якщо ви не використовуєте ізоляторну область. Видаліть цей рядок зі своєї директиви

scope: { ... }

і тоді ваша директива не створить нової сфери. Він використовуватиме батьківську область. Потім ви можете отримати доступ до всіх батьківських властивостей області безпосередньо.

Документація говорить: "Часто бажано передавати дані з ізольованого діапазону через вираз та в батьківський діапазон", але це, здається, працює добре і з двосторонньою прив'язкою. Чому маршрут вираження був би кращим?

Так, двостороння прив'язка дозволяє локальній / директивної області та батьківській області обміну даними. "Прив'язка виразу" дозволяє директиві викликати вираз (або функцію), визначений атрибутом DOM - і ви також можете передавати дані як аргументи виразу або функції. Отже, якщо вам не потрібно обмінюватися даними з батьком - ви просто хочете зателефонувати на функцію, визначену в батьківській області, - ви можете використовувати синтаксис & .

Дивись також

• Опублікований блог Лукаша в блоці (охоплює @, =, &)
• Пояснення dnc253 @ і =
• моя відповідь в блозі про сфери застосування - в розділі директив (внизу, безпосередньо перед розділом «Зведення») є зображення ізоляційної області та її батьківської області.
• Яка різниця між & vs @ і = у angularJS

Є багато хороших відповідей тут, але я хотів би запропонувати свою точку зору про відмінності між @, =і &що зв'язування виявилося корисним для мене.

Усі три прив’язки - це спосіб передачі даних із вашої батьківської області в окрему область вашої директиви через атрибути елемента:

1. @ прив'язка призначена для проходження рядків. Ці рядки підтримують {{}}вирази для інтерпольованих значень. Наприклад: . Інтерпольований вираз оцінюється у відповідності з батьківською областю директиви.

2. = прив'язка призначена для двосторонньої прив'язки моделі. Модель у батьківській області пов'язана з моделлю в ізольованій області директиви. Зміни однієї моделі впливають на іншу, і навпаки.

3. & прив'язка призначена для передачі методу в область вашої директиви, щоб його можна було викликати у межах вашої директиви. Метод заздалегідь прив’язаний до базової області директиви і підтримує аргументи. Наприклад, якщо метод є привіт (ім'я) у батьківській області, то для того, щоб виконати метод зсередини вашої директиви, вам потрібно зателефонувати $ Domain.hello ({name: 'world'})

Я вважаю, що простіше запам’ятати ці відмінності, посилаючись на прив'язки до сфери, за коротшим описом:

• @ Прив’язка рядків до атрибутів
• = Двостороння прив'язка моделі
• & Прив'язка методу зворотного дзвінка

Символи також дозволяють зрозуміти, що змінна область представляє всередині вашої реалізації директиви:

• @ рядок
• = модель
• & метод

У порядку корисності (для мене все одно):

1. =
2. @
3. &

Це =означає двонаправлене зв'язування, тобто посилання на змінну до батьківської області. Це означає, що при зміні змінної в директиві вона буде змінена і в батьківській області.

@ означає, що змінна буде скопійована (клонована) в директиву.

Наскільки я знаю, <pane bi-title="{{title}}" title="{{title}}">{{text}}</pane>теж має працювати. bi-titleотримає значення змінної області батьківської області, яке може бути змінено в директиві.

Якщо вам потрібно змінити декілька змінних у батьківській області, ви можете виконати функцію в батьківській області зсередини директиви (або передавати дані через службу).

Якщо ви хочете дізнатися більше, як це працює з живим прикладом. http://jsfiddle.net/juanmendez/k6chmnch/

var app = angular.module('app', []);
app.controller("myController", function ($scope) {
    $scope.title = "binding";
});
app.directive("jmFind", function () {
    return {
        replace: true,
        restrict: 'C',
        transclude: true,
        scope: {
            title1: "=",
            title2: "@"
        },
        template: "<div><p>{{title1}} {{title2}}</p></div>"
    };
});

@ отримати як рядок

• Це не створює жодних прив'язок. Ви просто отримуєте слово, яке ви передали як рядок

= 2 способи зв'язування

• зміни, внесені від контролера, відображатимуться в посиланні на директиву, і навпаки

&Це поводиться дещо інакше, тому що область отримує функцію, яка повертає переданий об'єкт . Я припускаю, що це було необхідне для роботи. Загадка повинна це зрозуміти.

• Після виклику цієї функції отримувача, отриманий об'єкт поводиться так:
  • якщо функція була передана: функція виконується при закритті батьків (контролера), коли викликається
  • якщо була передана нефункція : просто отримайте локальну копію об'єкта, який не має прив'язки

Ця скрипка повинна демонструвати, як вони працюють . Зверніть особливу увагу на функції діапазону з get...назвою, щоб сподіватися краще зрозуміти, що я маю на увазі&

До директиви можна додати три способи:

1. Батьківська область застосування : Це спадкування за замовчуванням.

Директива та її батьківська область (контролер / директива, всередині якої вона лежить) однакова. Таким чином, будь-які зміни, внесені до змінних областей всередині директиви, відображаються і в батьківському контролері. Не потрібно вказувати це, оскільки це за замовчуванням.

2. Дитина сфера : директива створює дочірній обсяг , який успадковує від батьківської області , якщо ви вкажете змінну області дії директиви , як вірно.

Тут, якщо ви змінюєте змінні сфери дії всередині директиви, вона не відображатиметься в батьківській області, але якщо ви зміните властивість змінної області, що відображається в батьківській області, як ви фактично змінювали змінну сфери застосування з батьківської області .

Приклад,

app.directive("myDirective", function(){

    return {
        restrict: "EA",
        scope: true,
        link: function(element, scope, attrs){
            scope.somvar = "new value"; //doesnot reflect in the parent scope
            scope.someObj.someProp = "new value"; //reflects as someObj is of parent, we modified that but did not override.
        }
    };
});

3. Ізольована область застосування : Це використовується, коли потрібно створити область, яка не успадковується від області контролера.

Це трапляється під час створення плагінів, оскільки це робить директиву загальною, оскільки вона може бути розміщена в будь-якому HTML і не впливає на її батьківську область.

Тепер, якщо ви не хочете ніякої взаємодії з батьківською сферою, ви можете просто вказати область як порожній об'єкт. подібно до,

scope: {} //this does not interact with the parent scope in any way

Переважно це не так, оскільки нам потрібна деяка взаємодія з батьківською сферою, тому ми хочемо, щоб деякі значення / зміни пройшли через. З цієї причини ми використовуємо:

1. "@"   (  Text binding / one-way binding )
2. "="   ( Direct model binding / two-way binding )
3. "&"   ( Behaviour binding / Method binding  )

@ означає, що зміни в області контролера будуть відображені в області директиви, але якщо ви зміните значення в області директиви, змінна області контролера не вплине.

@ завжди очікує, що відображений атрибут буде виразом. Це дуже важливо; оскільки для роботи префікса "@" нам потрібно загорнути значення атрибута всередині {{}}.

= є двонаправленим, тому якщо ви зміните змінну в області директиви, також впливає змінна області контролера

& використовується для прив'язки методу застосування контролера, так що при необхідності ми можемо викликати його з директиви

Перевага тут полягає в тому, що ім'я змінної не повинно бути однаковим в області контролера та області директив.

Наприклад, область застосування директиви має змінну "dirVar", яка синхронізується зі змінною "contVar" області контролера. Це дає велику потужність і узагальнення директиві, оскільки один контролер може синхронізуватися зі змінною v1, тоді як інший контролер, що використовує ту саму директиву, може попросити dirVar синхронізувати зі змінною v2.

Нижче наведено приклад використання:

Директива та контролер:

 var app = angular.module("app", []);
 app.controller("MainCtrl", function( $scope ){
    $scope.name = "Harry";
    $scope.color = "#333333";
    $scope.reverseName = function(){
     $scope.name = $scope.name.split("").reverse().join("");
    };
    $scope.randomColor = function(){
        $scope.color = '#'+Math.floor(Math.random()*16777215).toString(16);
    };
});
app.directive("myDirective", function(){
    return {
        restrict: "EA",
        scope: {
            name: "@",
            color: "=",
            reverse: "&"
        },
        link: function(element, scope, attrs){
           //do something like
           $scope.reverse(); 
          //calling the controllers function
        }
    };
});

І html (зверніть увагу на різницю для @ і =):

<div my-directive
  class="directive"
  name="{{name}}"
  reverse="reverseName()"
  color="color" >
</div>

Ось посилання на блог, де це добре описано.

Просто ми можемо використовувати: -

1. @ : - для рядкових значень для одного способу прив'язки даних. одним способом прив'язки даних ви можете передавати значення області лише директиві

2. = : - для об'єктного значення для двостороннього прив'язки даних. двостороннім прив'язкою даних ви можете також змінити значення області в директиві, а також у html.

3. & : - для методів та функцій.

EDIT

У нашому визначенні компонента для кутової версії 1.5 і вище
є чотири різні типи прив'язок:

1. = Двостороння прив'язка даних : - якщо ми змінимо значення, воно автоматично оновиться

2. < один із способів прив'язки : - коли ми просто хочемо прочитати параметр із батьківської області, а не оновлювати його.

3. @це для параметрів String

4. &це для зворотних викликів у випадку, якщо ваш компонент потребує виведення чогось до своєї батьківської області

Я створив невеликий HTML-файл, який містить кутовий код, що демонструє відмінності між ними:

<!DOCTYPE html>
<html>
  <head>
    <title>Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  </head>
  <body ng-app="myApp">
    <div ng-controller="myCtrl as VM">
      <a my-dir
        attr1="VM.sayHi('Juan')" <!-- scope: "=" -->
        attr2="VM.sayHi('Juan')" <!-- scope: "@" -->
        attr3="VM.sayHi('Juan')" <!-- scope: "&" -->
      ></a>
    </div>
    <script>
    angular.module("myApp", [])
    .controller("myCtrl", [function(){
      var vm = this;
      vm.sayHi = function(name){
        return ("Hey there, " + name);
      }
    }])
    .directive("myDir", [function(){
      return {
        scope: {
          attr1: "=",
          attr2: "@",
          attr3: "&"
        },
        link: function(scope){
          console.log(scope.attr1);   // =, logs "Hey there, Juan"
          console.log(scope.attr2);   // @, logs "VM.sayHi('Juan')"
          console.log(scope.attr3);   // &, logs "function (a){return h(c,a)}"
          console.log(scope.attr3()); // &, logs "Hey there, Juan"
        }
      }
    }]);
    </script>
  </body>
</html>

Спосіб = двостороння прив'язка , що дозволяє вам мати зміни в прямому ефірі всередині вашої директиви. Коли хтось змінить цю змінну поза директивою, у вас з’являться ці змінені дані всередині вашої директиви, але @ шлях не є двостороннім прив’язкою . Це працює як Text . Ви пов'язуєте один раз, і будете мати лише його значення.

Щоб зрозуміти це, ви можете скористатися цією чудовою статтею:

Область застосування AngularJS "@" і "="

Це питання вже побито на смерть, але я все одно поділюсь цим у випадку, якщо хтось там бореться із жахливим безладом, яке є областями AngularJS. Це буде охоплювати =, <, @, &і ::. Повний запис можна знайти тут .

=встановлює двосторонній зв'язок. Зміна властивості у батька призведе до зміни дитини, і навпаки.

<встановлює односторонній зв'язок, батько до дитини. Зміна власності у батька призведе до зміни дитини, але зміна властивості дитини не вплине на батьківську властивість.

@присвоїть дочірній властивості рядкове значення атрибута тегу. Якщо атрибут містить вираз , дочірнє властивість оновлюється кожного разу, коли вираз оцінюється на інший рядок. Наприклад:

<child-component description="The movie title is {{$ctrl.movie.title}}" />

bindings: {
    description: '@', 
}

Тут descriptionвластивість у дочірній області буде поточним значенням виразу "The movie title is {{$ctrl.movie.title}}", де movieє об'єктом у батьківській області.

&це трохи хитро, і насправді, здається, немає жодної вагомої причини коли-небудь використовувати його. Це дозволяє оцінити вираз у батьківській області, замінюючи параметри змінними з дочірньої області. Приклад ( планк ):

<child-component 
  foo = "myVar + $ctrl.parentVar + myOtherVar"
</child-component>

angular.module('heroApp').component('childComponent', {
  template: "<div>{{  $ctrl.parentFoo({myVar:5, myOtherVar:'xyz'})  }}</div>",
  bindings: {
    parentFoo: '&foo'
  }
});

Враховуючи parentVar=10, вираз parentFoo({myVar:5, myOtherVar:'xyz'})буде оцінено до, 5 + 10 + 'xyz'і компонент буде відображатися як:

<div>15xyz</div>

Коли ви коли-небудь хотіли б використовувати цей складний функціонал? &часто використовується людьми для передачі дочірньої області функції зворотного дзвінка в батьківській області. У дійсності, однак, такого ж ефекту можна досягти, використовуючи '<' для передачі функції, яка є більш простою і уникає незграбного синтаксису фігурних дужок для передачі параметрів ( {myVar:5, myOtherVar:'xyz'}). Поміркуйте:

Зворотний виклик за допомогою &:

<child-component parent-foo="$ctrl.foo(bar)"/>

angular.module('heroApp').component('childComponent', {
  template: '<button ng-click="$ctrl.parentFoo({bar:'xyz'})">Call foo in parent</button>',
  bindings: {
    parentFoo: '&'
  }
});

Зворотний виклик за допомогою <:

<child-component parent-foo="$ctrl.foo"/>

angular.module('heroApp').component('childComponent', {
  template: '<button ng-click="$ctrl.parentFoo('xyz')">Call foo in parent</button>',
  bindings: {
    parentFoo: '<'
  }
});

Зауважте, що об'єкти (та масиви) передаються посиланням на дочірню область, а не копіюються. Це означає, що навіть якщо це одностороння прив'язка, ви працюєте з одним і тим же об'єктом і в батьківській, і в дочірній області.

Щоб побачити різні префікси в дії, відкрийте цей планк .

[Офіційні документи] Більш
пізні версії AngularJS вводять можливість мати одноразову прив'язку, де властивість дочірньої області оновлюється лише один раз. Це покращує продуктивність, усуваючи необхідність перегляду батьківського властивості. Синтаксис відрізняється зверху; щоб оголосити разову прив'язку, ви додаєте ::перед виразом у компоненті тег :

<child-component 
  tagline = "::$ctrl.tagline">
</child-component>

Це поширюватиме значення taglineна область дитини, не встановлюючи одностороннього або двостороннього зв’язку. Примітка : якщо taglineспочатку undefinedзнаходиться в батьківській області, angular буде спостерігати за ним, поки вона не зміниться, а потім зробить одноразове оновлення відповідного властивості у дочірній області.

Підсумок

У таблиці нижче показано, як працюють префікси залежно від того, властивість є об'єктом, масивом, рядком тощо.

@ властивість локальної області використовується для доступу до рядкових значень, визначених за межами директиви.

= У випадках, коли вам потрібно створити двосторонню прив'язку між зовнішньою областю та областю ізоляції директиви, ви можете використовувати символ =.

& властивість локального діапазону дозволяє споживачеві директиви переходити до функції, яку може застосовувати директива.

Будь ласка, перевірте нижченаведене посилання, яке дає вам чітке розуміння прикладів. Я вважаю це дуже корисним, тому подумав поділитися ним.

http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-izolate-scope

Навіть коли область застосування локальна, як у вашому прикладі, ви можете отримати доступ до батьківського діапазону через властивість $parent. Припустимо в коді нижче, що titleвизначено в батьківській області. Потім ви можете отримати доступ до заголовку як $parent.title:

link : function(scope) { console.log(scope.$parent.title) },
template : "the parent has the title {{$parent.title}}"

Однак у більшості випадків такий же ефект краще отримати за допомогою атрибутів.

Приклад того, де я знайшов позначення "&", яке використовується "для передачі даних з ізольованої області через вираз та в батьківську область", корисним (і двосторонній зв'язок даних не вдалося використати) було в директиві для надання спеціальної структури даних всередині ng-повтору.

<render data = "record" deleteFunction = "dataList.splice($index,1)" ng-repeat = "record in dataList" > </render>

Однією частиною візуалізації була кнопка видалення, і тут було корисно приєднати функцію видалення із зовнішньої області за допомогою &. Всередині рендер-директиви це виглядає

scope : { data = "=", deleteFunction = "&"},
template : "... <button ng-click = "deleteFunction()"></button>"

Двостороння прив'язка даних, тобто data = "="не може використовуватися, оскільки функція видалення працюватиме на кожному $digestциклі, що не є добре, оскільки запис негайно видаляється і ніколи не видається.

Я реалізував усі можливі варіанти у загадці.

У ньому розглядаються всі варіанти:

scope:{
    name:'&'
},

scope:{
    name:'='
},

scope:{
    name:'@'
},

scope:{

},

scope:true,

https://jsfiddle.net/rishulmatta/v7xf2ujm

основна відмінність між ними справедлива

@ Attribute string binding
= Two-way model binding
& Callback method binding

@ і = подивіться інші відповіді.

Один готча про TL; DR; отримує вираз (не тільки функцію, як у прикладах в інших відповідях) від батьків, і встановлює його як функцію в директиві, яка викликає вираз. І ця функція має можливість замінити будь-яку змінну&

& (навіть ім'я функції) вираження, передаючи об'єкт змінним.

пояснив
& це посилання на вираз, це означає , що якщо ви що - то передати , як <myDirective expr="x==y"></myDirective>
в директиві це exprбуде функція, яка викликає вираз, наприклад:
function expr(){return x == y}.
тому в html директиві <button ng-click="expr()"></button>виклик буде вираз. У js директиви якраз і $scope.expr()буде називатися вираз.
Вираз буде називатися з $ range.x і $ range.y з батьків.
Ви маєте можливість змінити параметри!
Якщо ви встановите їх за допомогою дзвінка, наприклад, <button ng-click="expr({x:5})"></button>
тоді вираз буде викликано вашим параметром xта батьківським параметром y.
Ви можете перекрити обидва.
Тепер ви знаєте, навіщо <button ng-click="functionFromParent({x:5})"></button>працює.
Тому що це просто називає вираз батьків (напр<myDirective functionFromParent="function1(x)"></myDirective>) і замінює можливі значення вказаними параметрами в цьому випадку x. . .
це може бути:
<myDirective functionFromParent="function1(x) + 5"></myDirective>
або
<myDirective functionFromParent="function1(x) + z"></myDirective>
з дочірнім викликом: або навіть із заміною функції:
<button ng-click="functionFromParent({x:5, z: 4})"></button>

<button ng-click="functionFromParent({function1: myfn, x:5, z: 4})"></button>

це просто вираз, не має значення, чи це функція, чи багато функцій, чи просто порівняння. І ви можете замінити будь-яку змінну цього виразу.

Приклади:
шаблон директиви проти
виклику:
батьківський параметр визначив $ range.x, $ range.y: батьківський шаблон: <myDirective expr="x==y"></myDirective>
<button ng-click="expr()"></button>виклики $scope.x==$scope.y
<button ng-click="expr({x: 5})"></button>викликає 5 == $scope.y
<button ng-click="expr({x:5, y:6})"></button>дзвінки5 == 6

батько визначив $ range.function1, $ range.x, $ range.y:
батьківський шаблон:<myDirective expr="function1(x) + y"></myDirective>

<button ng-click="expr()"></button>дзвінки $scope.function1($scope.x) + $scope.y
<button ng-click="expr({x: 5})"></button>дзвінки $scope.function1(5) + $scope.y
<button ng-click="expr({x:5, y:6})"></button>дзвінки $scope.function1(5) + 6
директива $ scope.myFn як функція:
<button ng-click="expr({function1: myFn, x:5, y:6})"></button> виклики$scope.myFn(5) + 6

Чому я повинен використовувати "{{title}}" з "@" та "title" з "="?

Коли ви використовуєте {{title}}, лише батьківське значення області передається в режим перегляду та оцінюється. Це обмежується одним способом, тобто зміна не відображатиметься в батьківській області. Ви можете використовувати "=", коли ви хочете відобразити також зміни, зроблені в дочірній директиві, для батьківської області. Це двосторонній шлях.

Чи можу я також отримати доступ до батьківського діапазону безпосередньо, не прикрашаючи свій елемент атрибутом?

Коли у директиві є атрибут range (область: {}), ви більше не зможете отримувати прямий доступ до батьківського діапазону. Але все ж до нього можна отримати доступ через область. $ Parent тощо. Якщо ви видалите область застосування з директиви, до неї можна отримати доступ безпосередньо.

Документація говорить: "Часто бажано передавати дані з ізольованого діапазону через вираз та в батьківський діапазон", але це, здається, працює добре і з двосторонньою прив'язкою. Чому маршрут вираження був би кращим?

Це залежить від контексту. Якщо ви хочете викликати вираз або функцію з даними, ви використовуєте &, і якщо ви хочете ділитися даними, ви можете використовувати бітрекпрямований спосіб, використовуючи '='

Ви можете знайти відмінності між різними способами передачі даних до директиви за посиланням нижче:

AngularJS - Ізольовані сфери застосування - @ vs = vs &

http://www.codeforeach.com/angularjs/angularjs-isolated-scopes-vs-vs

@ Прив'язка рядка до атрибутів (в один бік) = Прив'язка двосторонньої моделі та прив'язка методу зворотного зв'язку

@ прив'язує властивість локальної / директивної області до оціненого значення атрибута DOM. = прив'язує властивість локального / директивної області до властивості батьківського діапазону. & прив'язка призначена для передачі методу в область вашої директиви, щоб його можна було викликати у межах вашої директиви.

@ Attribute stringinding = Двостороння прив'язка моделі та прив'язка методу зворотного зв’язку