Questions And Answers

More Tutorials

Angular function binding, expression binding

Pass a method into a directive. It provides a way to execute an expression in the context of the parent scope. Method will be executed in the scope of the parent, you may pass some parameters from the child scope there. You should not use {{...}} for interpolation. When you use & in a directive, it generates a function that returns the value of the expression evaluated against the parent scope (not the same as = where you just pass a reference).

<expression-binding interpolated-function-value="incrementInterpolated(param)" <!--
interpolatedFunctionValue({param: 'Hey'}) will call passed function with an argument. -->
 function-item="incrementInterpolated" <!-- functionItem({param: 'Hey'})() will
call passed function, but with no possibility set up a parameter. -->
 text="'Simple text.'" <!-- text() == 'Simple text.'-->
 simple-value="123" <!-- simpleValue() == 123 -->
 interpolated-value="parentScopeValue" <!-- interpolatedValue() == Some value
from parent scope. -->
 object-item="objectItem"> <!-- objectItem() == Object item from parent scope. -

All parameters will be wrapped into functions.

Available binding through a simple sample

angular.component("SampleComponent", {
 bindings: {
 title: '@',
 movies: '<',
 reservation: "=",
 processReservation: "&"

Here we have all binding elements.

@ indicates that we need a very basic binding, from the parent scope to the children scope, without any watcher, in any way. Every update in the parent scope would stay in the parent scope, and any update on the child scope would not be communicated to the parent scope.

< indicates a one way binding. Updates in the parent scope would be propagated to the children scope, but any update in the children scope would not be applied to the parent scope.

= is already known as a two-way binding. Every update on the parent scope would be applied on the children ones, and every child update would be applied to the parent scope.

& is now used for an output binding. According to the component documentation, it should be used to reference the parent scope method. Instead of manipulating the children scope, just call the parent method with the updated data.


In this page (written and validated by ) you learned about AngularJS function binding, expression binding . What's Next? If you are interested in completing AngularJS tutorial, your next topic will be learning about: AngularJS Providers.

Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue:

Share On:

Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using, you agree to have read and accepted our terms of use, cookies and privacy policy.