winjs / angular-winjs

Project to smooth the AngularJS/WinJS interaction

angular-winjs

Project to smooth the AngularJS/WinJS interaction. This code is a shim layer which facilitates usage of WinJS UI controls in an Angular Windows application. It achieves this by creating directives for the various controls which allow them to show up in Angular markup like:

How to use this in your Angular project?

Just make sure to include WinJS 4.0, and then include the shim.

<script src="base.js"></script>
<script src="ui.js"></script>
<script src="angular-winjs.js"></script>

You must also add this module to your list of angular module dependencies:

angular.module('your-module', ['winjs', 'other-module-you-depend-on', 'etc']);

Examples of control usage

AppBar and AppBarCommand

<!-- 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-separator></win-app-bar-separator>
    <win-app-bar-command icon="'save'" label="'Save'"></win-app-bar-command>
    <win-app-bar-content>
        <win-auto-suggest-box placeholder-text="'Search'"></win-auto-suggest-box>
    </win-app-bar-content>
    <win-app-bar-command type="'toggle'" icon="'world'" label="'Planet'"></win-app-bar-command>
</win-app-bar>

AutoSuggestionBox

The current query text is: {{queryText}}.<br/>
<win-auto-suggest-box query-text="queryText"></win-auto-suggest-box>

Content Dialog

angular.module("yourAngularApp", ["winjs"]).controller("yourController", function ($scope) {
    $scope.contentDialogHidden = true;
    $scope.showContentDialog = function () {
        $scope.contentDialogHidden = false;
    };
});
<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>

DatePicker

<win-date-picker current="date" on-change="dateChanged()"></win-date-picker>

FlipView

<win-flip-view item-data-source="ratings" on-page-selected="pageSelected()">
    <win-item-template>This flip view item's rating is: {{item.data.rating}}</win-item-template>
</win-flip-view>

Flyout

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

Hub and HubSection

<win-hub>
    <win-hub-section header="'First section'" is-header-static="true">
      Hubs are useful for varied content
    </win-hub-section>
    <win-hub-section header="'The second section'">
      This hub is boring however, it just has things like data bindings: {{ratings.length}}
    </win-hub-section>
    <win-hub-section header="'The tail...'">
      Because it's only purpose is to show how to create a hub
    </win-hub-section>
</win-hub>

ItemContainer

<win-item-container>
  An ItemContainer is a wrapper around content that adds pressed
  and cross-slide selection behaviors!
</win-item-container>

ListView

<div>Selected count: {{selection.length}}, indexes: {{selection.toString()}}</div>
<win-list-view item-data-source="ratings" selection="selection">
    <win-list-view-header>This is a ListView header</win-list-view-header>
    <win-item-template>This list view item's rating is: {{item.data.rating}}</win-item-template>
    <win-list-layout></win-list-layout>
    <win-list-view-footer>This is a ListView footer</win-list-view-footer>
</win-list-view>

Menu and MenuCommand

<button id="menuAnchor">Show a menu!</button>
<win-menu anchor="'#menuAnchor'">
    <win-menu-command label="'command the first'"></win-menu-command>
    <win-menu-command label="'command the second'"></win-menu-command>
    <win-menu-command label="'this would be a great place for ng-repeater...'"></win-menu-command>
</win-menu>

Pivot and PivotItem

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

Rating

The current rating is: {{ratings[0].rating}}.<br/>
<win-rating max-rating="5" user-rating="ratings[0].rating"></win-rating>

SemanticZoom

<win-semantic-zoom>
    <win-list-view item-data-source="data" group-data-source="data.groups">
        <win-item-template>
            The data is: {{item.data}}
        </win-item-template>
        <win-group-header-template>
            The group is: {{item.key}}
        </win-group-header-template>
    </win-list-view>
    <win-list-view item-data-source="data.groups">
        <win-item-template>
            The group is: {{item.key}}
        </win-item-template>
    </win-list-view>
</win-semantic-zoom>

SplitView and optional SplitViewPaneToggle

angular.module("yourAngularApp", ["winjs"]).controller("yourController", function ($scope) {
    $scope.splitViewElement = document.getElementById("splitView");
});
<win-split-view-pane-toggle split-view="splitViewElement"></win-split-view-pane-toggle>
<win-split-view id="splitView">
    <win-split-view-pane>
        SplitView Navigation Pane
        <win-split-view-command label="'Home'" icon="'home'" on-invoked="goToHome()"></win-split-view-command>
        <win-split-view-command label="'Settings'" icon="'settings'" on-invoked="goToSettings()"></win-split-view-command>
    </win-split-view-pane>
    <win-split-view-content>SplitView Content Area</win-split-view-content>
</win-split-view>

ToolBar

<win-tool-bar>
    <win-tool-bar-command label="'This is a ToolBar command'" icon="'add'"></win-tool-bar-command>
    <win-tool-bar-separator></win-tool-bar-separator>
    <win-tool-bar-content>
        <win-search-box placeholder-text="'Search'"></win-search-box>
    </win-tool-bar-content>
</win-tool-bar>

TimePicker

<win-time-picker current="time"></win-time-picker>

ToggleSwitch

<win-toggle-switch checked="toggleDisabled" label-on="'Other Switch Disabled'" label-off="'Other Switch Enabled'"></win-toggle-switch>
The state is: {{toggleState}}<br/>
<win-toggle-switch checked="toggleState" disabled="toggleDisabled"></win-toggle-switch>

Tooltip

<win-tooltip>
    <win-tooltip-content>This can have arbitrary content, like images...</win-tooltip-content>
    This has a tooltip, hover and see...
</win-tooltip>

WinControl

<!-- If you ever need access to the WinJS winControl, you can expose it to your Angular scope by using the win-control directive -->
<win-pivot win-control="pivotWinControl">
    <win-pivot-item header="'Sample'">
      This Pivot is showing how to access its winControl through Angular. 
      The winControl can now be accessed as a variable on the Angular scope, using the same name that was 
      specified in the directive. In this case, $scope.pivotWinControl
    </win-pivot-item>
</win-pivot>

How to run unit tests

Install Node

In order run tests, ensure that you have Node.js installed.

Run the tests

From the local angular-winjs repository

npm install
npm test

Notes

For all of the controls you can bind to: all public events, and camel cased property names, conveniently map to attributes.

• appBar.closedDisplayMode = "compact" maps to <win-app-bar closed-display-mode="'compact'">
• flipView.onpageselected = pagesSelected() maps to <win-flip-view on-page-selected="pageSelected($event)">

angular-winjs's Issues

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

ListView - type of GridLayout

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

/Thanks

Migrate API changes to angular-winjs

NavBar, AppBar, ToolBar and SplitView had breaking API name changes to some methods, properties, css classes and event names that were made in the WinJS master branch back in March. angular-winjs needs to be updated to include these changes.

Depend on WinJS 4.0-preview package?

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

How to pass parameters to function?

Hi

How can I pass parameters to function onfootervisibilitychanged()?

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.

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.

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:

1. Open page, press "Add Item" button

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

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 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:

1. Open page
2. Click on the first item 'A'
3. 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.

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

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.

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"

Add AutoSuggestBox

SearchBox is in here but AutoSuggestBox is missing.

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

<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

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.

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.

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.

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);

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

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:

1. 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

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

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!

Add simple samples for controls

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

What is SectionHeaderTemplate?

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

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);

safari mac osx problem

Angular directives do not render in safari Mac osx... {} stays on the page

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>

1. Paste the above into an angular sample on the Try Site.
2. 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.

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

1. Paste the code below into an Angular sample on the Try Site.
2. 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>

ng-repeat'ed Pivot Items doesn't update on $scope changes

On start, wrapped by ng-repeat Pivot Items are created as they should, but when I try to change used in ng-repeat variable in $scope, changes doesn't appear in the Pivot.

There is example:

<!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

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?

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>

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.

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>

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 !

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?

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.

Missing URI schemes in the angular img/aHref sanitization whitelist

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

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

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.

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?

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.

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

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>

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>

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.

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?

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