How to implement PhoneJS SlideOut with AngularJS?

Question

I tried the following code:

var app = angular.module('app', ['ngRoute', 'dx'])

app.controller('IndexCtrl', function($scope){
    var contacts = [
        { name: "Barbara J. Coggins", phone: "512-964-2757", email: "[email protected]", category: "Family" },
        { name: "Carol M. Das", phone: "360-684-1334", email: "[email protected]", category: "Friends" },
        { name: "Janet R. Skinner", phone: "520-573-7903", email: "[email protected]", category: "Work" }
    ];
    $scope.slideOutOptions = {
        dataSource: contacts,
        itemTemplate: 'item',
        menuItemTemlate: 'menuItem'
    }
})


<!-- HTML -->
    <div class="app-index" ng-controller="IndexCtrl">
        <div dx-slideout="slideOutOptions">
            <div data-options="dxTemplate: { name: 'item' }">
                <h1 data-bind="text: category"></h1>
                <p><b>Name:</b> <span data-bind="text: name"></span></p>
                <p><b>Phone:</b> <span data-bind="text: phone"></span></p>
                <p><b>e-mail:</b> <span data-bind="text: email"></span></p>
            </div>
            <div data-options="dxTemplate: { name: 'menuItem' }">
                <b data-bind="text: name"></b>
            </div>
        </div>
    </div>

AngularJS there is not enough documentation on the DevExpress site. there are only examples using Knockout. Checkout PhoneJS DXSlideOut Documentation

Answer 1

The problem is in the HTML templates. You should use Angular syntax there.

<div dx-slideout="slideOutOptions">
    <div data-options="dxTemplate: { name: 'item' }">
        <h1>{{category}}</h1>
        <p><b>Name:</b> <span>{{name}}</span></p>
        <p><b>Phone:</b> <span>{{phone}}</span></p>
        <p><b>e-mail:</b> <span>{{email}}</span></p>
    </div>
    <div data-options="dxTemplate: { name: 'menuItem' }">
        <b>{{name}}</b>
    </div>
</div>

Checkout docs about Angular approach.