AngularJS

10 Aug 20176 minutes to read

Essential JS includes AngularJS directives for all controls in the ej.widget.angular.min.js script file. All the Essential JS directives have been encapsulated into a single module called ejangular so the first step would be to declare dependency for this module within your AngularJS application.

  • JAVASCRIPT
  • angular.module('DateCtrl', ['ejangular'])
         .controller('DatePickerCtrl', function ($scope) {
             $scope.dateValue = "2/3/2013";
    });

    All the Syncfusion widget’s control directives are prefixed with ej- to avoid conflict with other library directives and its properties are defined using e- prefix followed by the property name. The code example for defining controls in AngularJS is as follows,

  • HTML
  • <html xmlns="http://www.w3.org/1999/xhtml" ng-app="DateCtrl">
      <head>
        <title>Essential Studio for JavaScript : DatePicker - AngularJS</title>
      </head>
      <body ng-controller="DatePickerCtrl">
        <input id="datepick" ej-datepicker e-value="dateValue" e-enableStrictMode="true" />
      </body>
    </html>

    In the above code snippet, ej-datepicker denotes the control directive for the Syncfusion’s datepicker widget and all its properties are prefixed with the letter e- (For example, e-value).

    Data binding

    When a widget’s model (ng-model) attribute is bound to a scope variable, it can reflect the changes both ways. In general, we could have more than one property bound to the same variable.

    The below table depicts the properties of all the Syncfusion widgets that supports model binding -

    Control Supported properties
    ejAccordion -
    ejAutoComplete value
    ejBarcode -
    ejBulletGraph value
    comparativeMeasureValue
    ejButton -
    ejChart xZoomFactor
    yZoomFactor
    xZoomPosition
    yZoomPosition
    ejCheckBox -
    ejCircularGauge value
    minimum
    maximum
    ejDatePicker value
    ejDateTimePicker value
    ejDiagram -
    ejDialog -
    ejDigitalGauge value
    ejDropDownList value
    ejGantt selectedItem
    ejGrid dataSource
    selectedRow
    pageSettings.currentPage
    ejLinearGauge value
    minimum
    maximum
    ejMaps zoomLevel
    minZoom
    zoomFactor
    maxZoom
    baseMapIndex
    ejMaskEdit value
    ejMenu -
    ejOlapChart title.text
    commonSeriesOptions.type
    locale
    ejOlapClient Title
    gridLayout
    displaySettings.mode
    displaySettings.defaultView
    displaySettings.controlPlacement
    displaySettings.enableTogglePanel
    locale 
    ejOlapGauge rowsCount
    columnsCount
    showHeaderLabel
    locale
    radius
    frameType 
    ejPivotGrid Layout
    enableCellContext
    hyperlinkSettings.enableValueCellHyperlink
    hyperlinkSettings.enableRowHeaderHyperlink
    hyperlinkSettings.enableColumnHeaderHyperlink
    hyperlinkSettings.enableSummaryCellHyperlink 
    ejRadioButton -
    ejRangeNavigator -
    ejRating currentValue
    ejRTE value
    ejRotator -
    ejSchedule fields.dataSource
    currentView
    currentDate
    ejScroller scrollTop
     scrollLeft
    ejSlider value
     values
    ejSplitButton -
    ejSplitter -
    ejTab -
    ejTagCloud -
    ejNumericTextbox value
    ejPercentageTextbox value
    ejCurrencyTextbox value
    ejTimePicker value
    ejToggleButton -
    ejToolbar -
    ejTreemap dataSource
    colorValuePath
    weightValuePath
    ejTreeView -
    ejUploadbox -
    ejWaitingPopup -

    Model binding has been demonstrated in the below code,

  • HTML
  • <html xmlns="http://www.w3.org/1999/xhtml" ng-app="DateCtrl">
      <head>
        <title>Essential Studio for JavaScript : DatePicker - AngularJS</title>
        <!-- SCRIPT & CSS REFERENCE SECTION -->
      </head>
      <body ng-controller="DatePickerCtrl">
        <input id="mydatepicker1" ej-datepicker  e-value="dateValue" e-enableStrictMode="true" />
        <input id="mydatepicker2" ej-datepicker  e-value="dateValue" e-enableStrictMode="true" />
        <script type="text/javascript">
            angular.module('DateCtrl', ['ejangular'])
               .controller('DatePickerCtrl', function ($scope) {
                   $scope.dateValue = "01/01/2015";
            });
        </script>
      </body>
    </html>

    ##Event binding

    Events can be bind to controls using the prefix e- and particular event name. For example, to bind change event on ejDatePicker, we need to define attribute as e-change="dateChanged". Refer the following snippet for complete example.

  • HTML
  • <html xmlns="http://www.w3.org/1999/xhtml" ng-app="DateCtrl">
      <head>
        <title>Essential Studio for JavaScript : DatePicker - AngularJS</title>
        <!-- SCRIPT & CSS REFERENCE SECTION -->
      </head>
      <body ng-controller="DatePickerCtrl">
        <input id="mydatepicker1" ej-datepicker e-value="dateValue" e-enableStrictMode="true" e-change="dateChanged" />
        <script type="text/javascript">
            angular.module('DateCtrl', ['ejangular'])
               .controller('DatePickerCtrl', function ($scope) {
                   $scope.dateValue = "01/01/2015";
                   $scope.dateChanged = function(e){
                       // console.log('Date value changed to ' + e.value)
                   }
            });
        </script>
      </body>
    </html>

    Getting Widget Reference in Controller

    In controller, you can get the reference to the ej widgets using the ID of particular widget in AngularJS scope. Refer the following code example.

  • HTML
  • <body ng-controller="DatePickerCtrl">
        <input id="myDatePicker" ej-datepicker e-value="dateValue" e-enableStrictMode="true" e-change="dateChanged" />
    
        <script type="text/javascript">
            angular.module('DateCtrl', ['ejangular'])
               .controller('DatePickerCtrl',["$scope", function ($scope) {
                   $scope.dateValue = "01/01/2015";
                   $scope.dateChanged = function(e){
                      alert($scope.myDatePicker.model.value)
                   }
            }]);
        </script>
      </body>

    NOTE

    Since the widgets rendered after the controller, we can’t access the widget object and their members like properties/methods inside controller. So we need to use callback functions or ‘$postLink’ (in case of custom directives). For more information about component Life-cycle refer the link

    Widget Configuration in Controller

    You can set whole ej widgets configuration using particular component attribute. Please find the code snippet for the same:

  • HTML
  • <body ng-controller="DatePickerCtrl">
        <input id="mydatepicker" ej-datepicker="dateSettings" />
    
        <script type="text/javascript">
            angular.module('DateCtrl', ['ejangular'])
               .controller('DatePickerCtrl', ["$scope", function ($scope) {
                   $scope.dateSettings = { value: new Date(2013, 06, 28), dateFormat: "MM/dd/yyyy" }
               }]);
        </script>
        
      </body>