What is the difference between '@' and '=' in directive scope in AngularJS?

I've read the AngularJS documentation on the topic carefully, and then fiddled around with a directive. Here's the fiddle.

And here are some relevant snippets:

  • From the HTML:

    <pane bi-title="title" title="{{title}}">{{text}}</pane>
    
  • From the pane directive:

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

There are several things I don't get:

  • Why do I have to use "{{title}}" with '@' and "title" with '='?
  • Can I also access the parent scope directly, without decorating my element with an attribute?
  • The documentation says "Often it's desirable to pass data from the isolated scope via an expression and to the parent scope", but that seems to work fine with bidirectional binding too. Why would the expression route be better?

I found another fiddle that shows the expression solution too: http://jsfiddle.net/maxisam/QrCXh/

What's The Difference Between "i.e." vs. "e.g."?, One easy way to remember the difference between these two abbreviations is by employing a simple mnemonic device. Difference between Coronavirus and SARS (). Coronavirus Vs. SARS Coronavirus is a viral respiratory illness that is caused by the virus 2019-nCoV.

What's the difference between a pandemic, an epidemic, endemic , While conversational use of these words might not require precise definitions, knowing the difference is important to help you better understand  The key difference between archenteron and blastocoel is that archenteron is the primary gut formed during gastrulation in the developing zygote, which later develops into the digestive tube, while blastocoel is an inner fluid-filled or yolk-filled cavity of the blastula formed during blastulation. Fertilization is the event of sexual

The = means bi-directional binding, so a reference to a variable to the parent scope. This means, when you change the variable in the directive, it will be changed in the parent scope as well.

@ means the variable will be copied (cloned) into the directive.

As far as I know, <pane bi-title="{{title}}" title="{{title}}">{{text}}</pane> should work too. bi-title will receive the parent scope variable value, which can be changed in the directive.

If you need to change several variables in the parent scope, you could execute a function on the parent scope from within the directive (or pass data via a service).

What is the difference between isolation and quarantine?, What is the difference between isolation and quarantine? Isolation and quarantine are public health practices used to protect the public by preventing exposure to  What is the difference between == and === in JavaScript? I have also seen != and !== operators. Are there more such operators? This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question. == is === with type converting (aka coercion).

If you would like to see more how this work with a live example. 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>"
    };
});

Epidemic vs. Pandemic, What Is the Difference Between an , While casual use of epidemic may not require such nuance, it's important to know the differences between these two terms (and similar ones like outbreak and  What's The Difference (Album Version (Edited)) Licensed to YouTube by. UMG (on behalf of Aftermath); UMPI, SODRAC, UNIAO BRASILEIRA DE EDITORAS DE MUSICA - UBEM, ASCAP, Create Music Publishing

Dementia vs. Alzheimer's Disease: What Is the Difference?, What is the difference between Alzheimer's and dementia? Get an overview of each and learn about early symptoms, risk factors, diagnosis and treatment. We often use these terms interchangeably, when they actually refer to very different things. But understanding the differences between race and ethnicity is only half the story.

Pandemic vs. Epidemic: What is the Difference?, What is the difference between an epidemic and a pandemic? Epidemic vs. Pandemic. An epidemic is defined as “an outbreak of disease that  People often use the terms internet and web interchangeably, but these are two different technologies. We looked at both technologies to help you understand the difference between the two.

What's the difference between GET & TAKE?, But one of them is passive, and the other is an active verb. In this English grammar lesson, I will explain the difference between “get” and “take”,  Which vs. That: What’s the Difference in Usage? To understand when to use that or which, it’s important to understand clauses.A defining clause (also called an essential clause or a restrictive clause) gives information essential to the meaning of the sentence.

The Difference Between Worry, Stress and Anxiety, The Difference Between Worry, Stress and Anxiety. They're not all the same, but we do have tips to help you deal with all of them. Type 1 and type 2 diabetes may have similar names, but they are different diseases with unique causes. Causes of type 1 diabetes. The body’s immune system is responsible for fighting off foreign

Comments
  • Fair point. Ability to research and find answers is important.
  • stackoverflow.com/questions/14908133/…
  • In simple words = is used in directive isolate scope to enable two way binding and @ does not updates model, only updates Directive scope values.
  • @iwein why your fiddle code at jsfiddle.net/maxisam/QrCXh does not work with googleapi -ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js ? Your code works only if i use your cdn -code.angularjs.org/1.0.1/angular-1.0.1.js
  • I see lots of good answers below, but can anyone give a pointer to the official angular documentation that answers this question?
  • Huh, this is a really weird behavior, especially when not using interpolation and just trying to pass a string. Apparently the pull request has indeed been merged into the development builds and is in 1.1.5 and 1.2.0 RC builds. Good on them for fixing this very unintuitive behavior!
  • Writing '@' or '=' is so much clearer then writing "eval-dom" or "parent-scope" or any other human-readable text. Good design decision.
  • @ ('at') copies the value of the 'ATtribute'. = ('equals') is equivalent to saying the key equals your expression. This, at least, is how I keep them strait.
  • Are you sure that = is only for parent-scope properties? Any expression seems to work - not only parent-scope properties.
  • @JonathanAquino, yes that works, but @ would be more appropriate -- with foo="{{1+1}}" -- because we don't need two-way data binding here. The point I tried to make in the comment above is that we should use = only when the directive needs two-way data binding. Use @ or & otherwise.
  • Actually, "&" does support arguments (or, rather, locals) of the form: callback({foo: "some value"}), which could then be used <my-dir callback="doSomething(foo)">. Otherwise, good answer
  • Should be accepted answer. Here is an concise article with the same information, but with added code examples: umur.io/…