angularjs – WinJS Angular Pivot指令无法呈现

发布时间：2020-12-17 17:14:54 所属栏目：安全来源：网络整理

导读：似乎win-pivot angular指令不会在 Windows Phone 8.1 JavaScript应用程序上呈现实际的pivot或pivot项.我正在使用以下设置.除了使用新的JavaScript Pivot App项目创建的默认代码之外,我还在default.html文件中添加了以下指令. 从以下代码中,只有左右透视标题

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

解决方法

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项目开始在splitView中显示.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!