如何用AngularJS实现PhoneJS SlideOut？

Question

我尝试了以下代码：

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

app.controller('IndexCtrl', function($scope){
    var contacts = [
        { name: "Barbara J. Coggins", phone: "512-964-2757", email: "BarbaraJCoggins@rhyta.com", category: "Family" },
        { name: "Carol M. Das", phone: "360-684-1334", email: "CarolMDas@jourrapide.com", category: "Friends" },
        { name: "Janet R. Skinner", phone: "520-573-7903", email: "JanetRSkinner@jourrapide.com", 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 DevExpress站点上没有足够的文档。只有使用Knockout的示例。检出PhoneJS DXSlideOut Documentation

Answer 1

问题出在HTML模板中。你应该在那里使用Angular语法。

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

查看docs about Angular approach。