Question

似乎win-pivot angular指令不会在Windows Phone 8.1 JavaScript应用程序上呈现实际的pivot或pivot项。我使用以下设置。除了使用新的JavaScript Pivot App项目创建的默认代码之外，我还在default.html文件中添加了以下指令。

从以下代码中，只有左右透视标题呈现（没有样式）。我已经将旧CSS文件（WinJS 2.1）中的引用移动到了后期。

设置

Windows Phone 8.1 VS Project
WinJS 4.1
Angular JS 1.4.1

指令HTML

<div>
    <win-pivot>
        <win-pivot-left-header>Custom Left Header</win-pivot-left-header>
        <win-pivot-item header="'First'">
            Pivots are useful for varied content
        </win-pivot-item>
        <win-pivot-item header="'Second'">
            This Pivot  is boring however, it just has things like data bindings: {{ratings.length}}
        </win-pivot-item>
        <win-pivot-item header="'Tail...'">
            Because it's only purpose is to show how to create a Pivot
        </win-pivot-item>
        <win-pivot-right-header>Custom Right Header</win-pivot-right-header>
    </win-pivot>    
</div>

指令JavaScript代码

var ang = angular.module('app', ['winjs']);

ang.directive('app.testdir', ['$filter', function ($filter) {
    return {
        restrict: "AE",
        replace: true,
        templateUrl: "/scripts/app.html",
        scope: {
        },
        controller: ["$scope", Controller],
    };
    function Controller($scope) {

    }
}]);

default.html body

<body class="phone">
    <div>
        <div app.testdir></div>
    </div>
    <div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/hub/hub.html'}"></div>

</body>

Answer 1

此问题在winjs 4.3中得到解决。你可以下载angular-winjs.js，ui.min和base.min的4.3版本。旧版本中也不包括拆分视图命令。这个问题也得到了解决。

WinJS Angular Pivot指令无法呈现

设置

1 个答案: