winjs / angular-winjs Goto Github PK

Project to smooth the AngularJS/WinJS interaction

License: Other

JavaScript 100.00%

angular-winjs's Introduction

Windows Library for JavaScript (WinJS)

Status

Microsoft is committed to making sure that WinJS continues to run for existing customers. At this time we don't have plans to invest in new features or feature requests. Bug fixes will be limited to correcting substantial issues that are blocking customer deployments. We may also consider bug fixes to help our customers maintain their existing WinJS-based apps.

Intro

WinJS is a set of JavaScript toolkits that allow developers to build applications using HTML/JS/CSS technology forged with the following principles in mind:

Provide developers with a distinctive set of UI controls with high polish and performance with fundamental support for touch, mouse, keyboard and accessibility
Provide developers with a cohesive set of components and utilities to build the scaffolding and infrastructure of their applications

This is a first step for the WinJS project and there is still a lot of work that needs to be done. Feel free to participate by contributing along the way.

Contribute

There are many ways to contribute to the project.

You can contribute by reviewing and sending feedback on code checkins, suggesting and trying out new features as they are implemented, submitting bugs and helping us verify fixes as they are checked in, as well as submitting code fixes or code contributions of your own.

Note that all code submissions will be rigorously reviewed and tested by the team, and only those that meet an extremely high bar for both quality and design appropriateness will be merged into the source.

Build WinJS

In order to build WinJS, ensure that you have git and Node.js installed.

Clone a copy of the master WinJS git repo:

git clone https://github.com/winjs/winjs.git

Change to the winjs directory:

cd winjs

Install the grunt command-line interface globally:

npm install -g grunt-cli

Grunt dependencies are installed separately in each cloned git repo. Install the dependencies with:

npm install

Run the following and the WinJS JavaScript and CSS files will be put in the bin directory:

grunt

Note: You may need to use sudo (for OSX, *nix, BSD etc) or run your command shell as Administrator (for Windows) to install Grunt globally.

Tests status

Refer to http://winjs.azurewebsites.net/#status for the current status of the unit tests and the list of known issues.

Try WinJS

Check out our online playground at http://winjsdevelop.azurewebsites.net/

Twitter https://twitter.com/BuildWinJS
Facebook https://www.facebook.com/buildwinjs

angular-winjs's People

Contributors

Stargazers

Watchers

angular-winjs's Issues

winPivot inside a split view

having a win-split-view and inserting win-pivot does not show content.
you can not see..

"Pivots are useful for varied content" or other text.

Add simple samples for controls

Basic sample pages will be extremely useful for anyone starting up with angular-winjs

winListWiew Error in Apache cordova app

I'm having some troubles in using angular-winjs inside a cordova app. By referring to the example on http://try.buildwinjs.com/#angular I made the following index.html and angularApp.js files:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>winjsAngular1</title>
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>
    <link href="css/default.css" rel="stylesheet" />
    <link href="WinJS/css/ui-light.css" rel="stylesheet" />
    <script src="WinJS/js/WinJS.js"></script>
    <script src="scripts/angular.js"></script>
    <script src="scripts/angularApp.js"></script>
    <script src="scripts/angular-winjs.js"></script>
    <link href="css/index.css" rel="stylesheet" />
</head>
<body>
    <div class="app" ng-app="sample" ng-controller="sampleController">
        <button ng-click="toggleEditMode()">Toggle <span>Mode: </span><span>{{mode.text}}</span></button>
        <span ng-show="mode.text === 'edit'">
            <button ng-click="addItem()">Add Item</button>
            <button ng-click="removeItem()">Remove Item(s)</button>
        </span>
        <win-list-view class="listView win-selectionstylefilled"
                       item-data-source="items"
                       selection-mode="mode.selectionMode"
                       tap-behavior="mode.tapBehavior"
                       header="select('.header')"
                       selection="selection">
            <win-item-template>
                <div class="smallListIconTextItem">
                    <img src="{{item.data.picture}}" class="smallListIconTextItem-Image" />
                    <div class="smallListIconTextItem-Detail">
                        <h4>{{item.data.title}}</h4>
                        <h6>{{item.data.text}}</h6>
                    </div>
                </div>
            </win-item-template>
            <win-list-layout></win-list-layout>
        </win-list-view>
    </div> 
</body>
</html>

angular.module('sample', ['winjs']).controller("sampleController", function ($scope) {
    var Mode = {
        editMode: {
            text: "edit",
            selectionMode: "multi",
            tapBehavior: "toggleSelect"
        },
        readOnly: {
            text: "readonly",
            selectionMode: "none",
            tapBehavior: "none"
        }
    };

    $scope.items = [
        { title: "Marvelous Mint", text: "Gelato", picture: "images/fruits/60Mint.png" },
        { title: "Succulent Strawberry", text: "Sorbet", picture: "images/fruits/60Strawberry.png" },
        { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/fruits/60Banana.png" },
        { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/fruits/60Lemon.png" },
        { title: "Creamy Orange", text: "Sorbet", picture: "images/fruits/60Orange.png" },
        { title: "Very Vanilla", text: "Ice Cream", picture: "images/fruits/60Vanilla.png" },
        { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/fruits/60Banana.png" },
        { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/fruits/60Lemon.png" }
    ];

    $scope.addItem = function () {
        $scope.items.splice(0, 0, {
            title: "Marvelous Mint",
            text: "Gelato",
            picture: "/images/fruits/60Mint.png"
        });
    };

    $scope.removeItem = function () {
        // Remove the items that are selected
        for (var i = $scope.selection.length - 1; i > -1; i--) {
            $scope.items.splice($scope.selection[i], 1);
        }
    };

    $scope.toggleEditMode = function () {
        $scope.mode = ($scope.mode === Mode.readOnly) ? Mode.editMode : Mode.readOnly;
    };

    $scope.mode = Mode.readOnly;
    $scope.selection = [];
});

When I render the index.html from a browser like Chrome all the js files are linked properly and the example is fully working, but when the app is started as a cordova app, deploying on device or emulator, this error is risen:

Error: [$compile:tplrt] http://errors.angularjs.org/1.3.15/$compile/tplrt?p0=winListView&p1=
   at fa (ms-appx://io.cordova.winjsangular1/www/scripts/angular.min.js:61:341)
   at S (ms-appx://io.cordova.winjsangular1/www/scripts/angular.min.js:51:454)
   at S (ms-appx://io.cordova.winjsangular1/www/scripts/angular.min.js:52:41)
   at D (ms-appx://io.cordova.winjsangular1/www/scripts/angular.min.js:49:461)
   at Anonymous function (ms-appx://io.cordova.winjsangular1/www/scripts/angular.min.js:18:4)
   at $eval (ms-appx://io.cordova.winjsangular1/www/scripts/angular.min.js:126:4)
   at Anonymous function (ms-appx://io.cordova.winjsangular1/www/scripts/angular-winjs.js:385:21)
   at $eval (ms-appx://io.cordova.winjsangular1/www/scripts/angular-winjs.js:384:17)
   at $apply (ms-appx://io.cordova.winjsangular1/www/scripts/angular.min.js:126:217)
   at Anonymous function (ms-appx://io.cordova.winjsangular1/www/scripts/angular.min.js:17:477)

There is already a fix or a workaround to use angular-winjs in cordova app? Thanks.

Grouped ListLayout - how?

http://try.buildwinjs.com/#listview:grouped

var myData = new WinJS.Binding.List([
        { title: "Banana Blast", ...

]};

var grouped = myData.createGrouped(function (item) {
    return item.title.toUpperCase().charAt(0);
}, function (item) {
    return {
        title: item.title.toUpperCase().charAt(0)
    };
}, function (left, right) {
    return left.charCodeAt(0) - right.charCodeAt(0);
});

How to implement that in angularjs e.g.

$scope.items = [
 { title: "Banana Blast", ...

];

$scope.grouped  =

ListView: Reorder not propagated to array

Impact

When using an array as an itemDataSource on a ListView, edits within the ListView do not get propagated to the array. Consequently, other UI that depends on that array will not get updated.

Repro Steps

// JavaScript

var module = angular.module('sample', ['winjs']).controller("sampleController", function ($scope) {
    $scope.list = [1, 2, 3, 4, 5];
    $scope.edit = function () {
        var tmp = $scope.list[0];
        $scope.list[0] = $scope.list[1];
        $scope.list[1] = tmp;
    };
});

WinJS.UI.processAll();

<!-- HTML -->

<div ng-controller="sampleController">
    <h2>ng-repeat</h2>
    <button ng-click="edit()">Swap First 2 Items</button>
    <ul>
        <li ng-repeat="n in list">{{n}}</li>
    </ul>

    <h2>ListView</h2>
    <win-list-view item-data-source='list' items-reorderable="true">
        <win-item-template>{{item.data}}</win-item-template>
    </win-list-view>
</div>

Paste the above into an angular sample on the Try Site.
In the ListView, click and drag 5 to make it the first item in the list.

Expected result: 5 is now the first element in the ListView and in the ng-repeat

Actual result: 1 is still the first item in the ng-repeat. The ng-repeat is out of sync.

Note: By clicking the "Swap First 2 Items" button, you can see that the ng-repeat and ListView are properly hooked up to the same array. They both update in response to this edit.

<win-app-bar-content> not working

<win-app-bar>
    <win-app-bar-command icon="'home'" label="'Home'"></win-app-bar-command>
    <win-app-bar-separator></win-app-bar-separator>
    <win-app-bar-command icon="'save'" label="'Save'"></win-app-bar-command>
</win-app-bar>

works

BUT - win-app-bar-content as shown below does not works

Angular is undefined

Hi im trying to make a universal app with angular-winjs but i get a angular is undefined and i dont know what to do. i downloaded the starter template from the trywinjs website.

Here is my code:

<!DOCTYPE html>
<html ng-app="AngularWinJSApp" ng-controller="AngularWinJSAppController" ng-csp>
<head>
    <title>WinJS project</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

    <link rel="stylesheet" href="lib/Microsoft.WinJS.4.0/css/ui-light.css" />
    <script src="lib/Microsoft.WinJS.4.0/js/WinJS.min.js"></script>
    <script src="lib/angular-winjs/angular-winjs.js"></script>

    <link rel="stylesheet" href="css/default.css" />
    <script src="js/default.js"></script>
</head>
<body class="phone">
    <a href="https://github.com/winjs/angular-winjs" target="_blank">Learn more about Angular-WinJS</a>
</body>
</html>

Any help would be appreciated:)

Regards Joel

SplitView Options

I like winjs and tried to get familar with angular-winjs. So I used the example for the splitView. But I missed a way to inject to options to the splitview. Is there a way to do this?

Saw the issue #15 and adapt the new parameter but i does not work.

<win-split-view id="splitView" opened-display-mode="'inline'" closed-display-mode="'none'">

It is always shown as opendDisplayMode="overlay" and closedDisplayMode="inline"

Pivot Control - SelectedIndex/Item attributes are not working

If I declare the "selected-index" property of the win-pivot control, nothing is happen.
Maybe I use it in a wrong manner. A more detailed documentation or examples would be nice.

<win-pivot selected-index='1'> win-pivot-item header="'Header1'">Item1</win-pivot-item> win-pivot-item header="'Header2'">Item2</win-pivot-item> </win-pivot>

Best regards

Add ListViewHeader/Footer directives for ListView's header and footer

The header/footer properties are difficult to use correctly. We should add <win-list-view-header> and <win-list-view-footer> directives so make this better.

SplitViewCommands have wrong background color

SplitViewCommands were inspired from NavBarCommands, as a result they received all the same styles.
However, every sample that previously used NavBarCommands in a SplitView always made the background color of the commands transparent. For example: http://try.buildwinjs.com/#splitview

However when the custom CSS is removed

The commands background color should be transparent.

Content Dialog not available

I tried it like this (from the flyout example)

<button id="contentDialogAnchor">Show a content dialog!</button>
<win-content-dialog anchor="'#contentDialogAnchor'">This is the content dialog content!!</win-content-dialog>

Maybe you could also add an example to the README.md also explaining how to use title, primaryCommandText and secondaryCommandText.

Thanks!

No documentation on what WinJS API is exposed to Angular controllers

I've been experimenting for about a day now, but I still haven't quite figured out how to call WinJS methods from an Angular controller.

For instance, I'd like to toggle a SplitView when the user clicks a certain button, but I can't figure out how to get a reference to the SplitView being used in my controller.

Are WinJS controls exposed as services, or are their methods supposed to be bound to from HTML?

angular-winjs is causing all lazy loading namespaces to run immediately

angular-winjs uses a pattern when it is creating directives where it checks the WinJS.UI namespace to make sure each control exists before it will create the corresponding angular directive for that control.

By doing this, it is accessing each property on the namespace, which causes each control module to initialize immediately while loading the angular-winjs script. The intention of the lazy loading modules is that we don't process all the script to initialize them until they are first accessed, to save on start up costs, especially when not all WinJS controls will necessarily be used.

The original check in for this in angular-winjs pattern was to differentiate WinJS 2.1 desktop from WinJS Phone 2.1 since they had different API surfaces.
spankyj/angular-winjs@99b4383

win-app-bar Problem

Hello,
I wrote a Windows 8 store application and I used your library in, but I have some trouble with the AppBar...
I put this code in my html page :

<!-- Shows up on the bottom of the screen, use right-click or touch edgy gesture to show -->
<win-app-bar>
    <win-app-bar-command icon="'home'" label="'Home'"></win-app-bar-command>
    <win-app-bar-command icon="'save'" label="'Save'"></win-app-bar-command>
</win-app-bar>

And I have this error when I arrive on the page :

TypeError: Object does not support this action
at initializeControl (ms-appx://61f6f3dd-9dda-4757-8094-11cf1d5cb766/Lib/angular-winjs.js:318:9)
at link (ms-appx://61f6f3dd-9dda-4757-8094-11cf1d5cb766/Lib/angular-winjs.js:459:17)
....

Followed by that one :

WinJS.UI._Overlay.MustContainCommands: Invalid HTML : bar applications / menus must only contain the command bar applications / menu.
at _Overlay_verifyCommandsOnly (ms-appx://microsoft.winjs.2.0/js/ui.js:38747:29)
at AppBar_ctor (ms-appx://microsoft.winjs.2.0/js/ui.js:40600:21)
at initializeControl (ms-appx://61f6f3dd-9dda-4757-8094-11cf1d5cb766/Lib/angular-winjs.js:318:9)
at link (ms-appx://61f6f3dd-9dda-4757-8094-11cf1d5cb766/Lib/angular-winjs.js:415:17)
at Anonymous function (ms-appx://61f6f3dd-9dda-4757-8094-11cf1d5cb766/Lib/Scripts/angular.min.js:70:132)
....

You know where is the error ? Or is it a trouble in angular-winjs ?

Thanks !

Whitelist HTTP

Hi.
I was wondering if there is any reason why "http" isn't whitelisted?
I'm having some issues with Angular adding "unsafe:" to my image urls when using then in the template of a ListView.

solution:
var whitelist = /^\s*(https**?**|ms-appx|ms-appx-web|ms-appdata):/i;
$compileProvider.imgSrcSanitizationWhitelist(whitelist);
$compileProvider.aHrefSanitizationWhitelist(whitelist);

try.buildwinjs.com/#angular error

Hello,

I have been trying angular-winjs in my cordova app and found errors like the angular expressions are not working properly also I have found the same error in the at

http://try.buildwinjs.com/#angular

and here my snapshot

http://i.imgur.com/PvEJ5Rr.png

win-app-bar inside of a win-pivot doesn't register click event for section='secondary' items

Here's my setup

<win-pivot title="greeting">
    <win-pivot-item header="'section 1'">
        <ng-include src="'js/app/templates/MessageList.html'"></ng-include>
    </win-pivot-item>
    <win-pivot-item header="'section 2'">
        This Pivot  is boring however, it just has things like data bindings:
    </win-pivot-item>
    <win-pivot-item header="'section 3'">
        Because it's only purpose is to show how to create a Pivot
    </win-pivot-item>
</win-pivot>

and inside of MessageList.html

<div>
    <win-app-bar>
        <win-app-bar-command data-label="'Save'" data-icon="'save'"></win-app-bar-command>
        <win-app-bar-command data-label="'Delete'" data-icon="'delete'" section="'secondary'"></win-app-bar-command>
        <win-app-bar-command data-label="'Refresh'" data-icon="'refresh'" section="'secondary'"></win-app-bar-command>
    </win-app-bar>
</div>

The app bar will render, and buttons that show on the bar (section='primary') register click events. However, when you click the expand button and try to click on items within the secondary area, the click event is eaten by the

element, and it never goes through to the button (no button css active/click highlights or anything). However if you pull the win-app-bar out of the template (MessageList.html in my case) and put it beside the win-pivot, then it works fine.

So to recap, putting a win-app-bar inside a win-pivot-item doesn't work :(

<win-pivot title="greeting">
    <win-pivot-item header="'section 1'">

<!--this will NOT work-->
        <win-app-bar>
        <win-app-bar-command data-label="'Save'" data-icon="'save'"></win-app-bar-command>
        <win-app-bar-command data-label="'Delete'" data-icon="'delete'" section="'secondary'"></win-app-bar-command>
        <win-app-bar-command data-label="'Refresh'" data-icon="'refresh'" section="'secondary'"></win-app-bar-command>
    </win-app-bar>
    </win-pivot-item>
    <win-pivot-item header="'section 2'">
        This Pivot  is boring however, it just has things like data bindings:
    </win-pivot-item>
    <win-pivot-item header="'section 3'">
        Because it's only purpose is to show how to create a Pivot
    </win-pivot-item>
</win-pivot>

<!--this will work-->
<win-app-bar>
        <win-app-bar-command data-label="'Save'" data-icon="'save'"></win-app-bar-command>
        <win-app-bar-command data-label="'Delete'" data-icon="'delete'" section="'secondary'"></win-app-bar-command>
        <win-app-bar-command data-label="'Refresh'" data-icon="'refresh'" section="'secondary'"></win-app-bar-command>
    </win-app-bar>

Error while creating AppBarCommand in WinJS 2.1

We are writing an AngularJS app for Windows Phone 8.1, which uses WinJS 2.1, and an error is thrown while creating the app bar commands at https://github.com/winjs/angular-winjs/blob/master/js/angular-winjs.js#L338 because controlConstructor is undefined. The error traces back to https://github.com/winjs/angular-winjs/blob/master/js/angular-winjs.js#L509 as WinJS.UI.Command is undefined in this version of WinJS. When changing WinJS.UI.Command to WinJS.UI.AppBarCommand, the app bar and its commands are correctly created and no issues are thrown.

Since WinJS.UI.Command is not defined in WinJS 2.1, WinJS.UI.Command === WinJS.UI.AppBarCommand in WinJS 4.0 and no tests are affected, is it safe to change the object name in L509 to support WinJS 2.1?

HubSection: CSS classes disappear when HubSections are created

Repro page:

<!DOCTYPE html>
<html ng-app="testApp" ng-controller="test">
<head>
    <script src="angular.js"></script>
    <script src="WinJS.js"></script>
    <script src="angular-winjs.js"></script>
    <link href="ui-dark.css" rel="stylesheet" />
</head>
<body>
    <script>
        var module = angular.module('testApp', ['winjs']);
        var controller = module.controller("test", function ($scope) {

        });
    </script>

    <win-hub scroll-position="scopeScrollPosition">
        <win-hub-section header="'First section'" is-header-static="true" class="hubSection1Class">
            Hubs are useful for varied content
        </win-hub-section>
    </win-hub>
</body>
</html>

Expected: HubSection that gets created also has the CSS class hubSection1Class
Actual: CSS class disappears

binding to win-hub headerinvoked event in an angular way

I admit that this just may be ignorance on my part, but I am having trouble with detecting a click on a section header in a win-hub control. I've scanned the source and found the onheaderinvoked event mentioned for this component, but I cannot bind to that event how I would expect to be able to with angular. For example, I have tried variations on binding to the event in markup:

<win-hub onheaderinvoked="headerInvoked">. . . </win-hub>

where headerInvoked is a method on the active $scope that receives an event object, but it does not get invoked. Seems like I was able to get the $scope function to be invoked in one variation of this approach, but only without arguments, and because the event.detail.index is required to determine which section header was clicked, that was kind of useless. The only way I have found to get the click detection to work is to put the following in my controller:

document.getElementById('main-hub').addEventListener('headerinvoked', headerInvoked);

where headerInvoked in this case is not a function defined in the current $scope, but just within the controller body. This seems like a very un-angular way of doing this. What an I missing? Could you provide an example of this somewhere?

Problem with firefox

Hi,
I made a simple app with cordova and this library.
On chrome 43 all works fine. On firefox I had a problem with angularJS that didn't find the module winjs (this library) for the injection on my angular app.

I don't know which are the informations you need for understand better the problem. Below I write my libs version and the script order:

├── angular-winjs#3.1.0 
├─┬ ngCordova#0.1.17
│ └── angular#1.4.2 
└── winjs#4.0.1

  <script src="lib/bower_components/angular/angular.js"></script>
  <!-- windows phone -->
  <link href="lib/bower_components/winjs/css/ui-dark.css" rel="stylesheet" />
  <script src="lib/bower_components/winjs/js/base.js"></script>
  <script src="lib/bower_components/winjs/js/ui.js"></script>
  <script src="lib/bower_components/angular-winjs/js/angular-winjs.js"></script>

The error message is:

Error: [$injector:modulerr] Failed to instantiate module app due to:
[$injector:modulerr] Failed to instantiate module winjs due to:
[$injector:nomod] Module 'winjs' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

WinJS Animations

I would like to know if it is possible and in the case how we can use winjs animations ( http://try.buildwinjs.com/#animations ) with angular-winjs. Thanks.

How to pass parameters to function?

How can I pass parameters to function onfootervisibilitychanged()?

Content Dialog - Does not open two times by button click

If I include the Content Dialog, the alert overlay appears just by the first time clicking.

<win-content-dialog primary-command-text="'Primary Command'" secondary-command-text="'Secondary Command'" title="'Title'" hidden="contentDialogHidden"> Add your content here </win-content-dialog> <button ng-click="showContentDialog()">Show Dialog</button>

The "standard" Win-JS Content Dialog allows multiple clicking.

AppBAr

closedDisplayMode in app bar with new winjs 4.1. full is not working. I know this only works on 4.0. can you direct me in your code so I can take a look and see if I can do anything?

thank you very much in advance.

ListView in Pivot doesn't show list items

Repro page:

<!DOCTYPE html>
<html ng-app="testApp" ng-controller="test">
<head>
    <script src="angular.js"></script>
    <script src="WinJS.js"></script>
    <script src="angular-winjs.js"></script>
    <link href="ui-dark.css" rel="stylesheet" />
</head>
<body>

    <script>
        var module = angular.module('testApp', ['winjs']);
        var controller = module.controller("test", function ($scope) {
            $scope.selection = [1];
            $scope.data = ["A", "B", "C"];
            $scope.addItem = function () {
                $scope.data.unshift("D");
            }
        })

        WinJS.UI.processAll();
    </script>


    <win-pivot>
        <win-pivot-item header="'First'">
          <button ng-click="addItem()">Add Item</button>
          Selection: {{selection}}

          <win-list-view item-data-source='data' selection="selection">
              <win-item-template>{{item.data}}</win-item-template>
          </win-list-view>

        </win-pivot-item>

        <win-pivot-item header="'Second'">
          Second
        </win-pivot-item>
    </win-pivot>

</body>
</html>

Repro steps:

Open page

Expected: A list with item A, B and C
Actual: No list is shown, only after resizing the browser the list is shown

ListView doesn't show items when navigating and using a promise

Repro page

<!DOCTYPE html>
<html ng-app="testApp">
<head>
    <link rel="stylesheet" href="lib/Microsoft.WinJS.4.0/css/ui-light.css"/>
    <script src="lib/angular.js"></script>
    <script src="lib/angular-route.js"></script>
    <script src="lib/Microsoft.WinJS.4.0/js/WinJS.min.js"></script>
    <script src="lib/angular-winjs.js"></script>
    <link rel="stylesheet" href="css/default.css"/>
</head>
<body>

<script>
    var app = angular.module('testApp', ['ngRoute', 'winjs']);

    app.config(['$routeProvider',
        function ($routeProvider) {
            $routeProvider.
                    when('/list', {
                        template: '<win-list-view item-data-source="data"><win-item-template><a href="#/detail">{{item.data}}</a></win-item-template></win-list-view>Regular repeat:<br/><div ng-repeat="item in data">{{item}}</div>',
                        controller: 'ListCtrl'
                    }).
                    when('/detail', {
                        template: '<a href="#/list">Back</a>',
                        controller: function() {}
                    }).
                    otherwise({
                        redirectTo: '/list'
                    });
        }]);

    app.controller('ListCtrl', ['$scope', 'DataService',
        function ($scope, DataService) {
            DataService.getData().then(function (data) {
                $scope.data = data;
            });
        }
    ]);

    app.factory('DataService', ['$http', function ($http) {
        var promise;

        return {
            getData: function () {
                if(!promise) {
                    promise = $http.get('https://www.google.com').then(function (data) {
                        return ["A", "B", "C"];
                    });
                }
                return promise;
            }
        };
    }
    ]);


    WinJS.UI.processAll();
</script>


<div class="view-container">
    <div ng-view class="view-frame"></div>
</div>

</body>
</html>

Repro steps:

Open page
Click on the first item 'A'
Now click the back link on top of the new page

Expected: The same 2 list as in step 1
Actual: The first WinJS list is not shown, the regular ng-repeat is still showing data (as expected)

This only seems to happen when using promises to return the data.

What is SectionHeaderTemplate?

I see SectionHeaderTemplate in the angular wrapper but I don't see it in WinJS.

Can't use angular filter with ListView

It should be possible to use the filter functionallity with the listview for example

<input class="win-textbox" type="text" ng-model="search" />
<win-list-view item-data-source="items | orderBy:'name' | filter:search">
   <win-item-template>
      <div>
         <div>{{item.data.name}}</div>
         <div>{{item.data.description}}</div>
      </div>
   </win-item-template>
   <win-list-layout></win-list-layout>
</win-list-view>

Depend on WinJS 4.0-preview package?

Should this depend on the WinJS 4.0-preview package rather than including WinJS.js directly?

winAppBarCommand doesn't have support for type='content'

The problem is that the template is set to a BUTTON element by default. WinJS throws an error if the element is not of type DIV.

Basically to fix this, I believe you need to add a compile function to the directive and replace the element based on it's type.

if(type == 'content')
    template = "<div ng-transclude='true'></div>";
else
    template = "<button ng-transclude='true'></button>"

element.replaceWith(template);

NuGet installation: Put angular-winjs.js in script folder

When you install angular-winjs via nuget it is installed in the root folder instead in the script folder. Please install the file in the script folder instead.

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

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>

Add AutoSuggestBox

SearchBox is in here but AutoSuggestBox is missing.

ListView: selection does not update on list change

Repro page:

<!DOCTYPE html>
<html ng-app="testApp" ng-controller="test">
<head>
    <script src="angular.js"></script>
    <script src="WinJS.js"></script>
    <script src="angular-winjs.js"></script>
    <link href="ui-dark.css" rel="stylesheet" />
</head>
<body>

    <script>
        var module = angular.module('testApp', ['winjs']);
        var controller = module.controller("test", function ($scope) {
            $scope.selection = [1];
            $scope.data = ["A", "B", "C"];
            $scope.addItem = function () {
                $scope.data.unshift("D");
            }
        })

        WinJS.UI.processAll();
    </script>
    <button ng-click="addItem()">Add Item</button>
    Selection: {{selection}}
    <win-list-view item-data-source='data' selection="selection">
        <win-item-template>{{item.data}}</win-item-template>
    </win-list-view>

</body>
</html>

Repro steps:

Open page, press "Add Item" button

Expected: selection updates to [2] when item is inserted in front
Actual: selection remains [1]

Many WinJS control properties aren't being applied back to the scope

Simple repro:

<!DOCTYPE html>
<html ng-app="testApp" ng-controller="test">
<head>
    <script src="angular.js"></script>
    <script src="WinJS.js"></script>
    <script src="angular-winjs.js"></script>
    <link href="ui-dark.css" rel="stylesheet" />
</head>
<body>

    <script>
        var module = angular.module('testApp', ['winjs']);
        var controller = module.controller("test", function ($scope) {
            $scope.data = [];
            for (var i = 0; i < 1000; i++) {
                $scope.data.push(i);
            }
            $scope.scrollPosition = 1000;
        })

        WinJS.UI.processAll();
    </script>
    scrollPosition: {{scrollPosition}}
    <win-list-view item-data-source='data' scroll-position="scrollPosition">
        <win-item-template>{{item.data}}</win-item-template>
    </win-list-view>

</body>
</html>

In this example, we use the scrollPosition data provided to us, but we don't update the scrollPosition property back on the scope when you scroll back and forth.

We have to do stuff like this code in the SplitView wrapper:

                if (attrs.paneHidden) {
                    var hiddenProp = $parse(attrs.paneHidden);
                    control.addEventListener("beforehide", function () {
                        hiddenProp.assign($scope, true);
                    });
                    control.addEventListener("beforeshow", function () {
                        hiddenProp.assign($scope, false);
                    });
                }

to update data back on the scope.

We need to do have logic updating pretty much all of the properties that aren't currently being updated. We also need to have batching logic for more noisy properties (like scrollPosition etc), since we want to limit the amount of times we kick off a digest cycle

appBarCommands in the section='secondary' do not update the correct element for disabled=true/false

I have a button in my appbar that I want to disable based on a value on my scope. The binding is working, and it sets the value on the control correctly (verified by debugging). However, it's not updating the correct button element. If you look at the screenshot below, you'll notice that there are two buttons for the save. One in the win-toolbar-actionarea and one in the win-toolbar-overflowarea. The button that is displayed is within the win-toolbar-overflowarea (since my section is set to 'secondary'), but when Angular binding updates the disabled value on the control, the other button is updated instead. This is why you can see in the picture that one of the buttons is disabled, whereas the other is not.

Perhaps there is a quick and cheap fix for this? Maybe calling a WinJs function outside of Angular to process the change to make both elements match?

Pivot tests are failing

They wait for the itemanimationend event as their heuristic to know when the control has finished loading. That event is not firing in the angular pivot tests.

Missing URI schemes in the angular img/aHref sanitization whitelist

We're missing case "ms-appdata":, and missing a whitelist for URI strings

General swipe behavior in 4.0

While experimenting with controls in 4.0 version I notice that it supports very basic swipe behavior. It is always short swipe in some direction. Then swipe is not sticky like in version 2 on Windows phone. I was able to drag pivot item and when I release it will switch to the next or previous. It is not the case in version 4. 0 on latest android chrome browser or ios, for example. What about edge swipe? Reveal side panel on an edge swipe? And finally is there a way to swipe on a list item to reveal new options on the item itself, like delete or archive on outlook app for ios?
Thanks.

SplitView: shownDisplayMode and hiddenDisplayMode doesn't work

It seems that you cannot set the properties shownDisplayMode and hiddenDisplayMode in the html markup of the SplpitView directive. The two properties should map to the html attributes shown-display-mode and hidden-display-mode, but the properties are not set.

In the code example below, one would expect that shownDisplayMode would be set to "inline" and hiddenDisplayMode to "inline", but that is not the case - the properties are left with their default values.

<win-split-view pane-hidden="false" shown-display-mode="inline" hidden-display-mode="inline">
    <win-split-view-pane>SplitView Navigation Pane</win-split-view-pane>
    <win-split-view-content>
        SplitView Content Area
    </win-split-view-content>
</win-split-view>

ListView: Bad move animations when data source is an array

Impact

When you use an array as a data source and you move an item, all of the items in between the old index and new index fade out and then fade in as though they were removed and reinserted. Instead, those items should just slide into their new locations.

Repro Steps

Paste the code below into an Angular sample on the Try Site.
Click the "Move Item" button

Expected: Items below the moved item slide into place.

Actual: Items below the moved item fade out and fade in as though they were removed and reinserted.

// JavaScript

angular.module('sample', ['winjs']).controller("sampleController", function ($scope) {
    $scope.items = [
        { title: "Marvelous Mint", text: "Gelato", picture: "/images/fruits/60Mint.png" },
        { title: "Succulent Strawberry", text: "Sorbet", picture: "/images/fruits/60Strawberry.png" },
        { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "/images/fruits/60Banana.png" },
        { title: "Lavish Lemon Ice", text: "Sorbet", picture: "/images/fruits/60Lemon.png" },
        { title: "Creamy Orange", text: "Sorbet", picture: "/images/fruits/60Orange.png" },
        { title: "Very Vanilla", text: "Ice Cream", picture: "/images/fruits/60Vanilla.png" },
        { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "/images/fruits/60Banana.png" },
        { title: "Lavish Lemon Ice", text: "Sorbet", picture: "/images/fruits/60Lemon.png" }
    ];

    $scope.moveItem = function () {
        WinJS.Utilities._slowAnimations = true;
        var item = $scope.items[1];
        $scope.items.splice(1, 1);
        $scope.items.splice(3, 0, item);
    };
});

/* CSS */

/* Template for the items in the ListViews in this sample */       
.smallListIconTextItem
{
    width: 100%;
    height: 70px;
    padding: 5px;
    overflow: hidden;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.smallListIconTextItem img.smallListIconTextItem-Image 
{
    width: 60px;
    height: 60px;
    margin: 5px;
    margin-right:20px;
}

.smallListIconTextItem .smallListIconTextItem-Detail
{
    margin: 5px;
}

.app {
    height: 100%;
}

/* CSS applied to the ListViews in this sample */
.listView
{
    height: 90%;
}

/* Override the background color for even/odd win-containers */
.listView .win-container.win-container-odd {
    background-color: #777;
}

.listView .win-container.win-container-even {
    background-color: #444;
}

<!-- HTML -->

<div class="app" ng-app="sample" ng-controller="sampleController">
    <button ng-click="moveItem()">Move Item</button>
    <win-list-view class="listView win-selectionstylefilled"
                   item-data-source="items"
                   header="select('.header')">
        <win-item-template>
            <div class="smallListIconTextItem">
                <img src="{{item.data.picture}}" class="smallListIconTextItem-Image" />
                <div class="smallListIconTextItem-Detail">
                    <h4>{{item.data.title}}</h4>
                    <h6>{{item.data.text}}</h6>
                </div>
            </div>
        </win-item-template>
        <win-list-layout></win-list-layout>
    </win-list-view>
</div>

Similar Example Page as React-Winjs But for angularjs-winjs

It will be good if we have a similar page below BUT for angularjs-winjs
http://winjs.github.io/react-winjs/examples/showcase/index.html

I have tried to go through many of the proposed winjs-angularjs directives for the different winjs controls
Very often, I realize that there are insufficient examples as well as insufficient winjs-angularjs directives.

I think most people gave out because the latest angularjs winjs version, although 4.0, is not necessary up-to-date when come to integrating user feedbacks on using the directives. Therefore, having a working example page incorporating a link to the latest 4.0 angularjs-winjs will save time and keep us interested on winjs.

ensureVisible ?

I'm new at both angular and winjs, so sorry if this is out of place.

I would love to have an first-item-visible property or some such for this listview.

If I try to force scroll to a listview item using ensureVisible (or setting indexOfFirstVisible), the property is not set (-1), because datasource is empty (too early).

But when I try tapping into onloadingstatechanged, it never seems to fire. (Not sure I'm doing this right.)

So I tried waiting 2 seconds, all data is clearly loaded, and I get this error:


   var list_v = document.getElementsByClassName("win-listview");
   if (list_v.length) {
               list_v = list_v[0].winControl;
               if (list_v) {
                           $timeout(function() {
                                list_v.ensureVisible(item_index);   // throws error below
                            }, 2000);  // ensure all data is loaded
               }
   }

TypeError: Cannot read property 'firstIndexDisplayed' of null
at ListView_ctor._Base.Namespace.define.ListView._Base.Namespace._lazy._Base.Class.define.indexOfFirstVisible.get as indexOfFirstVisible

Some control changes aren't propagated back to the scope

When the user interacts with a control causing a control's property to change (e.g. the user closing a SplitView causes the paneOpened property to be false), this property change should be propagated into the angular scope.

We do this for most properties but we missed some:

Pivot: selectionchanged event affects selectedIndex and selectedItem
SemanticZoom: zoomchanged event affects zoomedOut

<!DOCTYPE html>
<html ng-app="sample" ng-controller="sampleCtrl">

<head>
    <title>Pivot Repeat</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.0.0-preview/css/ui-light.min.css" rel="stylesheet" />
    <style>
    html,body,#pivot {
        height: 100%;
    }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.0.0-preview/js/WinJS.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="/script/lib/angular-winjs.js"></script>
    <script>
    angular.module('sample', ['winjs']).controller("sampleCtrl", function($scope) {
        $scope.items = [{
            title: "Succulent Strawberry",
            text: "Sorbet",
        }, {
            title: "Banana Blast",
            text: "Low-fat frozen yogurt",
        }];

        $scope.addItem = function() {
            $scope.items.splice(0, 0, {
                title: "Marvelous Mint",
                text: "Gelato",
            });
        };
    });
    </script>
</head>

<body>
    <button ng-click="addItem()">Add Item</button>
    list = {{items}}
    <ul>
        <li ng-repeat="item in items">{{item.title}}: {{item.text}}</li>
    </ul>
    <win-pivot id='pivot'>
        <win-pivot-item ng-repeat='item in items' header='item.title'>{{item.text}}</win-pivot-item>
    </win-pivot>
</body>

</html>

When I click "Add Item" button, content of variable and list updates accordingly, but Pivot stays unchanged.
If I try the same example but replace Pivot with Hub, then Hub updates as expected.

So, how to force the Pivot to update?

Update: the error message appears in Console when I click the "Add Item" button:

21:39:40.808 "Error: d is undefined
.Pivot</E.common.updateHeader@https://cdnjs.cloudflare.com/ajax/libs/winjs/4.0.0-preview/js/WinJS.min.js:27:9131
.Pivot</E.staticState<.handleHeaderChanged@https://cdnjs.cloudflare.com/ajax/libs/winjs/4.0.0-preview/js/WinJS.min.js:27:12115
.PivotItem</f<.header.set@https://cdnjs.cloudflare.com/ajax/libs/winjs/4.0.0-preview/js/WinJS.min.js:27:4915
e@https://cdnjs.cloudflare.com/ajax/libs/winjs/4.0.0-preview/js/WinJS.min.js:4:533
d@https://cdnjs.cloudflare.com/ajax/libs/winjs/4.0.0-preview/js/WinJS.min.js:4:258
.PivotItem</f<@https://cdnjs.cloudflare.com/ajax/libs/winjs/4.0.0-preview/js/WinJS.min.js:27:4690
initializeControl@http://home.ilyins.com:3000/script/lib/angular-winjs.js:318:19
.link@http://home.ilyins.com:3000/script/lib/angular-winjs.js:1171:31
Y/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:70:139
$@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:70:197
B@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:59:255
g@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:51:335
D/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:50:444
P/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:52:322
k@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:56:322
ne</<.compile/</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:234:428
Pe/this.$get</n.prototype.$watchCollection/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:122:291
Pe/this.$get</n.prototype.$digest@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:123:354
Pe/this.$get</n.prototype.$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:291
Ec[c]</<.compile/</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:216:124
lf/c@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:32:384
" "<div ng-repeat="item in items" header="item.title" class="placeholder ng-scope ng-isolate-scope">"1 angular.min.js:102:325
e/<() angular.min.js:102
He/this.$get</<() angular.min.js:76
$() angular.min.js:70
B() angular.min.js:59
g() angular.min.js:51
D/<() angular.min.js:50
P/<() angular.min.js:52
k() angular.min.js:56
ne</<.compile/</<() angular.min.js:234
Pe/this.$get</n.prototype.$watchCollection/<() angular.min.js:122
Pe/this.$get</n.prototype.$digest() angular.min.js:123
Pe/this.$get</n.prototype.$apply() angular.min.js:126
Ec[c]</<.compile/</<() angular.min.js:216
lf/c() angular.min.js:32

ListView - type of GridLayout

How do you change the layout to be the type of a GridLayout (or others)

/Thanks

winjs / angular-winjs Goto Github PK

angular-winjs's Introduction

Windows Library for JavaScript (WinJS)

Status

Intro

Contribute

Build WinJS

Tests status

Try WinJS

Follow Us

angular-winjs's People

Contributors

Stargazers

Watchers

Forkers

angular-winjs's Issues

Impact

Repro Steps

Impact

Repro Steps

Recommend Projects

Recommend Topics

Recommend Org

Jobs