What is the difference between & vs @ and = in angularJS

by

@ allows a value defined on the directive attribute to be passed to the directive’s isolate scope. The value could be a simple string value (myattr="hello") or it could be an AngularJS interpolated string with embedded expressions (myattr="my_{{helloText}}"). Think of it as “one-way” communication from the parent scope into the child directive. John Lindquist has a series of short screencasts explaining each of these. Screencast on @ is here: https://egghead.io/lessons/angularjs-isolate-scope-attribute-binding

& allows the directive’s isolate scope to pass values into the parent scope for evaluation in the expression defined in the attribute. Note that the directive attribute is implicitly an expression and does not use double curly brace expression syntax. This one is tougher to explain in text. Screencast on & is here: https://egghead.io/lessons/angularjs-isolate-scope-expression-binding

= sets up a two-way binding expression between the directive’s isolate scope and the parent scope. Changes in the child scope are propagated to the parent and vice-versa. Think of = as a combination of @ and &. Screencast on = is here: https://egghead.io/lessons/angularjs-isolate-scope-two-way-binding

And finally here is a screencast that shows all three used together in a single view: https://egghead.io/lessons/angularjs-isolate-scope-review

More Related Contents:

  1. capitalize the first letter and the letter followed by a dot(.) using angular js
  2. “Thinking in AngularJS” if I have a jQuery background? [closed]
  3. AngularJS : Initialize service with asynchronous data
  4. AngularJS ui-router login authentication
  5. Way to ng-repeat defined number of times instead of repeating over array?
  6. Call AngularJS from legacy code
  7. AngularJS ng-click stopPropagation
  8. How to create separate AngularJS controller files?
  9. How to watch for a route change in AngularJS?
  10. AngularJS sorting by property
  11. Angularjs – ng-cloak/ng-show elements blink
  12. How to trigger ngClick programmatically
  13. What is browser.ignoreSynchronization in protractor?
  14. Protractor set global variables
  15. Using $window or $location to Redirect in AngularJS
  16. ChartJS – Different color per data point
  17. Customizing the template within a Directive
  18. How to make a preselection for a select list generated by AngularJS?
  19. What happens with $q.all() when some calls work and others fail?
  20. angular directive ignore non-numeric input
  21. ng-selected not working in select element
  22. Confirmation dialog on ng-click – AngularJS
  23. Hide Angular UI Bootstrap popover when clicking outside of it
  24. Angularjs minification using grunt uglify resulting in js error
  25. How to change colours for Angular-Chart.js
  26. Genuinely stop a element from binding – unbind an element – AngularJS
  27. angularjs custom filter to check for values inside a data array
  28. In what JS engines, specifically, are toLowerCase & toUpperCase locale-sensitive?
  29. AngularJS application file structure
  30. AngularJS event on window innerWidth size change

Leave a Comment