Use of symbols '@', '&', '=' and '>' in custom directive's scope binding: AngularJS

angularjs angularjs-directive angularjs-scope
MAC picture MAC · Jun 14, 2016 · Viewed 142.1k times · Source

I have read a lot about the use of these symbols in the implementation of custom directives in AngularJS but the concept is still not clear to me.

What does it mean if I use one of the scope values in the custom directive?

What exactly are we doing with the scope here?

I am also not sure whether "scope:'>'" exists in the official documentation or not. It's been used in my project. (The use of "scope:'>'" was an issue in my project and It has been fixed.)

Answer

Aravind picture Aravind · Jun 14, 2016

> is not in the documentation.

< is for one-way binding.

@ binding is for passing strings. These strings support {{}} expressions for interpolated values.

= binding is for two-way model binding. The model in parent scope is linked to the model in the directive's isolated scope.

& binding is for passing a method into your directive's scope so that it can be called within your directive.

When we are setting scope: true in directive, Angular js will create a new scope for that directive. That means any changes made to the directive scope will not reflect back in parent controller.

Related questions

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 …

Read More
Confirmation dialog on ng-click - AngularJS

I am trying to setup a confirmation dialog on an ng-click using a custom angularjs directive: app.directive('ngConfirmClick', [ function(){ return { priority: 1, terminal: true, link: function (scope, element, attr) { var msg = attr.ngConfirmClick || "Are you sure?"; var clickAction = attr.ngClick; …

Read More
AngularJS: ng-repeat list is not updated when a model element is spliced from the model array

I have two controllers and share data between them with an app.factory function. The first controller adds a widget in the model array (pluginsDisplayed) when a link is clicked. The widget is pushed into the array and this change …

Read More