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.

html

<div ng-controller="ButtonCtrl">
    <div>
            <button id="button1" ej-button e-size="large" e-text="text"></button>
    </div>
    <div>

javascript

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

html

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

javascript

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