Data Binding
5 Dec 20182 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.