search

winjs / angular-winjs

Project to smooth the AngularJS/WinJS interaction
Other
126 stars 46 forks source link

Icons in navbar command (elsewhere too?) do not seem to appear #24

Closed shripathi-kamath closed 9 years ago

shripathi-kamath commented 9 years ago

I'm trying some of the examples from the Try WinJS site, without styling where possible. In an adaptation of the SplitView, I managed to get the show/hide toggle, the navigation and the content panes.

I cannot seem to get the icons in the navbar, however. Any suggestions?

<html>
<head>
    <title>AngularWinJS experiments</title>

    <link rel="stylesheet" href="lib/Microsoft.WinJS.4.0/css/ui-dark.css" />
</head>
<body ng-app="AngularWinJSApp" ng-controller="AngularWinJSAppController">
    <button ng-click="paneShown=!paneShown">{{paneShown ? 'Hide' : 'Show'}}</button>
    <win-split-view pane-hidden="!paneShown" shown-display-mode="'inline'" hidden-display-mode="'none'">
        <win-split-view-pane>
            <div>
                <win-nav-bar-command label="'Home'" icon="'home'" tooltip="'Tooltip for Home:put it in quotes'"></win-nav-bar-command>
                <win-nav-bar-command label="'Walk'" icon="'save'"></win-nav-bar-command>
                <win-nav-bar-command label="'Settings'" icon="'settings'"></win-nav-bar-command>
            </div>
        </win-split-view-pane>
        <win-split-view-content>Content Area</win-split-view-content>
    </win-split-view>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="lib/Microsoft.WinJS.4.0/js/WinJS.min.js"></script>
    <script src="lib/angular-winjs.js"></script>
    <script>
        var module = angular.module("AngularWinJSApp", ["winjs"]);
        module.controller("AngularWinJSAppController", function ($scope) {
        });
    </script>
</body>
</html>
rigdern commented 9 years ago

I wasn't able to repro this. Some questions for you:

shripathi-kamath commented 9 years ago
  1. Yes, I downloaded the AngularJS-WinJS sample, built a Visual Studio 2013 project around it. It's possible I missed something to include the .ttf, but unsure as to what.
  2. Windows 8.1 Enterprise, Chrome/IE latest versions.
  3. The HTML page I provided above is the complete app sans the WinJS libraries, but here, http://1drv.ms/1PZfP3P is a OneDrive link.

Thank you

rigdern commented 9 years ago

Thanks for the repro page. I successfully reproed it.

I found that if you use the version of WinJS that comes with the templates, the AppBar icons don't work. Is that where you got your WinJS? If so, this is probably a dupe of winjs/generator-winjs#3.

As a workaround, you could grab WinJS from http://try.buildwinjs.com/#get thru the "Direct Download" option.

shripathi-kamath commented 9 years ago

Thank you. I grabbed WinJS from the suggested link, and changed nothing but the WinJS folder, and the icons correctly appear as they should.

I suppose I should likewise rely on the version of angular-winjs from this git repository as well instead of the application templates .zip file.