AngularJS: Symbols ‘@’, ‘&’, ‘=’ and ‘>’ in custom directive’s scope binding

In an AngularJS directive the scope allows you to access the data in the attributes of the element to which the directive is applied.

This is illustrated best with an example:

<div my-customer name="Customer XYZ"></div>

and the directive definition:

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);
    }
  };
});

When the scope property is used the directive is in the so called “isolated scope” mode, meaning it can not directly access the scope of the parent controller.

In very simple terms, the meaning of the binding symbols is:

someObject: '=' (two-way data binding)

someString: '@' (passed directly or through interpolation with double curly braces notation {{}})

someExpression: '&' (e.g. hideDialog())

This information is present in the AngularJS directive documentation page, although somewhat spread throughout the page.

The symbol > is not part of the syntax.

However, < does exist as part of the AngularJS component bindings and means one way binding.


> 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.

Ref: https://stackoverflow.com/questions/37818740/use-of-symbols-and-in-custom-directives-scope-binding-angula


There are a lot of great answers here, but I would like to offer my perspective on the differences between @=, and & binding that proved useful for me.

All three bindings are ways of passing data from your parent scope to your directive’s isolated scope through the element’s attributes:

  1. @ binding is for passing strings. These strings support {{}} expressions for interpolated values. For example: . The interpolated expression is evaluated against directive’s parent scope.
  2. = binding is for two-way model binding. The model in parent scope is linked to the model in the directive’s isolated scope. Changes to one model affects the other, and vice versa.
  3. & binding is for passing a method into your directive’s scope so that it can be called within your directive. The method is pre-bound to the directive’s parent scope, and supports arguments. For example if the method is hello(name) in parent scope, then in order to execute the method from inside your directive, you must call $scope.hello({name:’world’})

I find that it’s easier to remember these differences by referring to the scope bindings by a shorter description:

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

The symbols also make it clearer as to what the scope variable represents inside of your directive’s implementation:

  • @ string
  • = model
  • & method

In order of usefulness (for me anyways):

  1. =
  2. @
  3. &

Ref: https://stackoverflow.com/questions/14050195/what-is-the-difference-between-and-in-directive-scope-in-angularjs

Angularjs restrict type

The restrict option is typically set to:

‘A’ – only matches attribute name
‘E’ – only matches element name
‘C’ – only matches class name
‘M’ – only matches comment

These restrictions can all be combined as needed:

‘AEC’ – matches either attribute or element or class name
Let’s change our directive to use restrict: ‘E’:

Check Query String

$(document).ready(function() {
if(document.location.search == "?msg=thanks") {
$("#alert").html("Thanks for your submission!");
} else if(document.location.search == "?msg=error") {
$("#alert").html("There was an error with your submission!");
} else {

}
});

tinyMCE init

การใช้งาน tinyMCE

tinyMCE.init({
// General options
mode : "none",
theme : "advanced",
forced_root_block : false,
force_br_newlines : true,
force_p_newlines : false,
cleanup_on_startup : true,
remove_linebreaks : false,
cleanup: true,
debug : true,
plugins : "codeprotect, pagebreak, style, layer, table, save, advhr, advimage, advlink, emotions, iespell, inlinepopups, insertdatetime, preview, media, searchreplace, print, contextmenu, paste, directionality, fullscreen, noneditable, visualchars, nonbreaking, xhtmlxtras, template, wordcount, advlist, autosave",

// Theme options
theme_advanced_buttons1 : "bold, italic, underline, strikethrough, |, justifyleft, justifycenter, justifyright, justifyfull, |, link, unlink, anchor, code, |, bullist, numlist, outdent, indent",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true
});

function removeControl()
{
tinyMCE.execCommand("mceRemoveControl", true, "ncontent");
}

function addControl()
{
tinyMCE.execCommand("mceAddControl", true, "ncontent");
}