AngularJS Approach

PhoneJS UI widgets can be used in applications built using the AngularJS version 1.1 framework. For this purpose, the PhoneJS library includes an AngularJS module registered under the name "dx". This module contains registered directives for all PhoneJS widgets. Include this module in the list of dependencies for your application module.

JavaScript
angular.module('myApp', [ 'dx' ]);

Read below to learn how to use PhoneJS widgets in AngularJS applications.

Create a Widget

PhoneJS supplies custom AngularJS directives for each widget. To create a PhoneJS widget on a page, add a div element and apply an attribute representing the corresponding directive. The attribute name should correspond to the AngularJS normalization rules: dx-widget-name. For instance, use the dx-button directive to create the dxButton widget.

HTML
<div dx-button=""></div>

To configure a widget, specify a configuration object within the directive's expression. The fields of this object represent the widget's configuration options.

HTML
<div dx-button="{ text: 'Click me!' }"></div>

You can set configuration options to the values that are specified in scope. In the code below, the dxButton's clickAction option is set to the showHelloWorld function that is defined within the scope of the controller.

HTML
<div ng-controller="Controller">
    <div dx-button="{ text: 'Click me!', clickAction: showHelloWorld }"></div>
</div>
JavaScript
function Controller($scope) {
    $scope.showHelloWorld = function() {
       alert("Hello world!");
   }
}

You can also set an object from the scope as a configuration object of a widget.

HTML
<div ng-controller="Controller">
    <div dx-button="buttonOptions"></div>
</div>
JavaScript
function Controller($scope) {
    $scope.buttonOptions = {
        text: 'Click me!',
        clickAction: function() {
            alert("Hello world!");
        }
    }
}

Note that options with two-way binding to scope fields should be set within an object that is assigned to the bindingOptions field of the widget's configuration object.

HTML
<div ng-controller="Controller">
    <div dx-text-box="{ bindingOptions: { value: 'user.name' } }"></div>
</div>
JavaScript
function Controller($scope) {
    $scope.user = {
       name: "Jack"
    }
}

In the code above, the value option value is set as a path to the required field of the scope's object. At the same time, you can specify a child scope for the bindingOptions object to avoid repeating long paths. To do this, use the data field of the widget's configuration object.

HTML
<div ng-controller="Controller">
    <div dx-text-box="{ data: 'user', bindingOptions: { value: 'name' } }"></div>
</div>
JavaScript
function Controller($scope) {
    $scope.user = {
       name: "Jack"
    }
}

Container Widget Specifics

The PhoneJS framework includes container widgets intended to display multiple items of the same type (dxList, dxGallery, dxTileView, etc.). These items are defined within the widget's data source as an array of objects (in the simplest way, an array of values). These items can be displayed by a default template. In this instance, it is implied that there is a certain set of fields within the data source objects (name, visible, etc.). The values of these fields (or the default values) are used in the default template to display items. Alternatively, you can define a custom template using specific fields of the given data source. To learn more about templates, refer to the Customize Widget Item Appearance article.

To define a custom template for a container widget, add a div element and apply the data-options atribute set to dxTemplate. Within this element, define a markup for the item template using the fields of the scope's object to which the widget's data source is bound. If the scope's field to which a widget's data source is bound represents a primitive value, bind to the $scope.scopeValue field within the item template.

HTML
<div ng-controller="Controller">
    <div dx-list="{ items: listItems }">
        <div data-options="dxTemplate: { name: 'item' }">
            <span class="listItem">{{value}}</span>
        </div>
    </div>
    <div dx-tabs="{ items: tabs }">
        <div data-options="dxTemplate: { name: 'item' }">
            <span class="tabItem">{{scopeValue}}</span>
        </div>
    </div>
    <div dx-popup="{ data: 'popupData'}">
        <span class="popupText">{{text}}</span>
        <img ng-src="imageSrc" />
    </div>
</div>
JavaScript
function Controller($scope) {
    $scope.listItems = [ {value: 'Item 1'}, {value: 'Item 2'} ];
    $scope.tabs = [ 'Tab 1', 'Tab 2' ];
    $scope.popupData = {
        text: 'Hello World!',
        imageSrc: 'greating.png',
    }
}

You can set data source fields for each widget item within the widget's configuration object. In the example below, the disabled field of the dxTabs widget's second item is set to the scope's tab2Disabled variable using two-way binding. Since the disabled field is used in the default item template, the second item will be disabled when the tab2Disabled variable is set to false.

HTML
<div ng-controller="Controller">
    <div dx-tabs="{ items: tabs, bindingOptions: { 'items[1].disabled': 'tab2Disabled' } }"></div>
</div>
JavaScript
function Controller($scope) {
    $scope.tabs = [ { text: 'Tab 1' }, { text: 'Tab 2' } ],
    $scope.tab2Disabled = false
}

To learn how to specify two-way bindings for PhoneJS widgets in AngularJS applications, read the Create a Widget topic above.