如何使用 AngularJS 实现 PhoneJS SlideOut？答案

【问题标题】：How to implement PhoneJS SlideOut with AngularJS?如何使用 AngularJS 实现 PhoneJS SlideOut？
【发布时间】：2014-11-07 18:55:43
【问题描述】：

我尝试了以下代码：

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

【问题讨论】：

标签： angularjs widget phonejs

【解决方案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。

【讨论】：