angularjs - WinJS Angular Pivot Directive cannot be rendered -
it seems win-pivot angular directive not render actual pivot or pivot items on windows phone 8.1 javascript app. i'm using following setup. in addition default code created new javascript pivot app project, have added following directive on default.html file.
from following code left , right pivot headers rendering (without styles). have move else reference old css files (winjs 2.1) latests.
setup
- windows phone 8.1 vs project
- winjs 4.1
- angular js 1.4.1
directive html
<div> <win-pivot> <win-pivot-left-header>custom left header</win-pivot-left-header> <win-pivot-item header="'first'"> pivots useful varied content </win-pivot-item> <win-pivot-item header="'second'"> pivot boring however, has things data bindings: {{ratings.length}} </win-pivot-item> <win-pivot-item header="'tail...'"> because it's purpose show how create pivot </win-pivot-item> <win-pivot-right-header>custom right header</win-pivot-right-header> </win-pivot> </div> directive javascript code
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>
there bug in angular-winjs
i facing same issue , found pivotitem not rendering. changed following line in angular-winjs.js ( 3.1 )
exists("pivotitem") && module.directive("winpivotitem", function () { to
exists("pivot") && module.directive("winpivotitem", function () { and still not rendered. when used ng-repeat listing pivot items, started rendering.
<win-pivot> <win-pivot-item ng-repeat="item_pivot in app.items" header="item_pivot.title"> {{item_pivot.text}} </win-pivot-item> </win-pivot> but due styling issues, not shown inside splitview. changed style also
<style> .win-pivot-header { color: #fff !important; } .win-pivot-item { position:static !important; } </style> and pivot items started displaying inside splitview.
update: if using winjs 4.3 style has changed
Comments
Post a Comment