Data Binding
5 Dec 2018 / 2 minutes to read
One-way binding
In buttons, One-way binding can be achieved by using “e-“ prefixed with the property name. All the properties related to the buttons are one-way bindable. Here, the one-way binding property of the button has been explained with the text property in the below code example.
<div ng-controller="ButtonCtrl">
<div>
<button id="button1" ej-button e-size="large" e-text="text"></button>
</div>
<div>
<script>
angular.module('buttonApp', ['ejangular'])
.controller('ButtonCtrl', function ($scope) {
$scope.text = "Click Me";
});
</script>
Run the above code to get the below output.
Event Binding
The event binding allows you to add an event handler for a specified event so that your the function will be invoked when that event is triggered. In AngularJS, we can bind functions to events of a button. Please refer the code sample below.
<div ng-controller="ButtonCtrl">
<div align="center">
<button id="button1" ej-button e-size="large" e-text="Click Me" e-click="onClick"></button>
</div>
<div>
<script>
angular.module('buttonApp', ['ejangular'])
.controller('ButtonCtrl', function ($scope) {
$scope.onClick = function (e) {
alert("Button has been clicked");
}
});
</script>
Run the above code to get the below output.
Was this page helpful?
Yes
No
Thank you for your feedback!
Thank you for your feedback and comments. We will rectify this as soon as possible!
An unknown error has occurred. Please try again.
Help us improve this page