WinJS Angular Pivot 指令无法呈现答案

【问题标题】：WinJS Angular Pivot Directive cannot be renderedWinJS Angular Pivot 指令无法呈现
【发布时间】：2015-07-23 14:02:01
【问题描述】：

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

从下面的代码中，只有左右枢轴标题正在呈现（没有样式）。我已将旧 CSS 文件 (WinJS 2.1) 的引用移至最新版本。

设置

Windows Phone 8.1 VS 项目
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 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>

【问题讨论】：

我已将 win-pivot 指令替换为其他 winjs 指令（例如列表视图、应用程序命令、菜单等）并且工作正常。
最后我降级到 WinJS 2.1 并且同样的代码工作得很好。

标签： angularjs windows-phone-8.1 winjs

【解决方案1】：

angular-winjs 中有一个错误

我也遇到了同样的问题，发现 PivotItem 没有呈现。我在 angular-winjs.js ( 3.1 ) 中更改了以下行

exists("PivotItem") && module.directive("winPivotItem", function () {

到

exists("Pivot") && module.directive("winPivotItem", function () {

它仍然没有被渲染。当我使用 ng-repeat 列出枢轴项目时，它开始渲染。

<win-pivot>
        <win-pivot-item ng-repeat="item_pivot in app.items" header="item_pivot.title">
               {{item_pivot.text}}
        </win-pivot-item>                        
  </win-pivot>

但由于一些样式问题，它没有显示在 splitView 中。也改变了一些风格

<style>
    .win-pivot-header {
        color: #FFF !important;
    }
    .win-pivot-item {
        position:static !important;
    }
  </style>

现在，pivot Items 开始在 splitView 中显示。

更新：如果您使用的是 WinJS 4.3，则只需更改样式

【讨论】：

现在我尝试使用 ng-switch 为每个内容创建单独的模板。还是您找到了使用静态 win-pivot-items 的方法？
只更新winjs4.2和angularwinjs，静态也可以。

【解决方案2】：

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

【讨论】：

您可能还需要更改一些 CSS 颜色才能显示拆分视图命令。