The win-pivot angular directive does not seem to display the actual anchor or anchor elements in the Windows Phone 8.1 JavaScript application. I am using the following setting. In addition to the default code created using the new Pivot App JavaScript project, I added the following directive to the default.html file.
From the following code, only the left and right rotary headers are rendering (no styles). I have another link from old CSS files (WinJS 2.1) to flippers.
Customization
- Windows Phone 8.1 VS Project
- WinJS 4.1
- Angular JS 1.4.1
HTML directive
<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 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>
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>
source
share