Data and Event Binding

28 Jun 20172 minutes to read

Two-way binding

In AngularJS framework, any changes to view proximately update to model, any changes in model directly updated with view rapidly. With ColorPicker control, value API enabled with two way binding to achieve this delightful functionality.

HTML View Section

HTML

<input id="colorpicker1" ej-colorpicker e-value="value" e-modeltype="picker"/>
     <input id="colorpicker2" ej-colorpicker e-value="value" e-modeltype="modelType"/>

Controller Section

JAVASCRIPT

<script>
            angular.module("ColorPickCtrl", ['ejangular']).controller("ColorPickCtrller", function ($scope) {
                $scope.value = "#278787",
                $scope.modelType = "palette"
                    });
        </script>

Run the above code to render the following output.

Event Binding

Component events and captured and processed based on application needs. These events can be registered with scope to enhance the component functionality with AngularJS. Please refer the below code example,

HTML View Section

HTML

<input id="colorpicker" ej-colorpicker e-value="value" e-close="colorchanged"/>

Controller Section

JAVASCRIPT

<script>
            angular.module("ColorPickCtrl", ['ejangular']).controller("ColorPickCtrller", function ($scope) {
                $scope.value = "#278787";
                $scope.colorchanged=function()
                    {
                    alert("color palette is closed");
                    }
               });
        </script>