How to access data-win-options in Angular-winjs?

xdvarpunen commented 8 years ago

Hi,

How do I access data-win-options in angular-winjs shim layer?

For instance I need to access selectionmode in listview, how to do that?

Thank you for your support, XDVarpunen

smilealdway commented 8 years ago

answer is - <win-list-view selection-mode="'none'"></win-list-view>

Best to get answer to all such questions is to see the JavaScript code of their test harness @ https://github.com/winjs/angular-winjs/tree/master/tests

https://github.com/winjs/angular-winjs/blob/master/tests/ListView.js

AmazingJaze commented 8 years ago

Hi @xdvarpunen, you can access these values using the winControl property of the listview. If you search for "winControl" on the main page of this repo: https://github.com/winjs/angular-winjs we provide an example of how to expose it on the $scope object.

AmazingJaze commented 8 years ago

Every WinJS.UI control will have a winControl property which you can use to access all properties on the control through JavaScript.

xdvarpunen commented 8 years ago

Hi @AmazingJaze and @smilealdway, thank you for your support.

Tests helped a bit. Apparently data-win-options key-value pair is usable straight as element attribute. For instance I wanted to set itemsReorderable to true, I simply use key in win-data-options that is as camelcase and write as snakecase into element attribute and give it a value:

<win-list-view id="mylistview" item-data-source="ratings" selection="selection" items-reorderable="true">
            <win-list-view-header>This is a ListView header</win-list-view-header>
            <win-item-template>
                <div class="miniTemp">
                    This list view item's rating is: {{item.data.rating}}
                </div>
            </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>

Didn't notice this point in Notes part in Readme.md, my bad.

winControl and processAll

When is processAll() called in angular-winjs? In angular-winjs.js controls are created in link-part of the directive, meaning after compilation of the directive is completed. I tried so far winControl in controller, link in directive, $viewContentLoaded and $stateChangeSuccess. In tests the element seems to be compiled through $compile. Can you please show how to use winControl with angular-winjs with demo?

Thank you for your support, XDVarpunen

xdvarpunen commented 8 years ago

Hi @AmazingJaze , @smilealdway , @jdalton , I got the winControl finally working.

In tests the directives give access to winControl after the compilation function. The angular-winjs basically takes parameters and creates winjs controls programmatically so no processAll() is done.

To access winControl, it is must to compile the directive first. I wrapped the code that includes the winjs controls into directive and in postLink modify the winControl with name specified in angular-winjs listview win-control -attribute . Here is my solution:

<!-- file: index.html -->
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Testing will winjs blend wincontrol</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/css/ui-light.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/js/base.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/js/ui.js"></script>
    <script src="https://cdn.rawgit.com/winjs/angular-winjs/master/js/angular-winjs.js"></script></script>

    <style>
        .win-listview {
            width: 600px;
            height: 300px;
            border: solid 2px rgba(0, 0, 0, 0.13);
        }

        .miniTemp {
            width: 282px;
            height: 70px;
            padding: 5px;
            overflow: hidden;
            display: -ms-grid;
        }
    </style>
</head>
<body>

    <div ng-app="wincontrolblends">
        <mylistview></mylistview>
    </div>

    <script>
        angular.module("wincontrolblends", ['winjs'])
       .controller("testCtrl", ['$scope', function ($scope) {
            $scope.ratings = [
            { "rating": "lol" },
            { "rating": "l2l" },
            { "rating": "lo1l" },
            { "rating": "lo3l" },
            { "rating": "lo4l" }
            ];
            $scope.selection = [];
        }])
        .directive("mylistview", ['$timeout', function ($timeout) {
            return {
                restrict: 'E',
                templateUrl: 'partialState1View1.html',
                controller: "testCtrl",
                link: {
                    pre: function preLink(scope, iElement, iAttrs, controller) {

                    },
                    post: function postLink(scope, iElement, iAttrs, controller) {
                        console.log(scope.lol.itemsReorderable);
                        scope.lol.itemsReorderable = true;
                    }
                }
            }
        }]);
    </script>
</body>
</html>

    <!-- file: partialState1View1.html -->
    <win-list-view id="mylistview" item-data-source="ratings" selection="selection" win-control="lol">
        <win-list-view-header>This is a ListView header</win-list-view-header>
        <win-item-template>
            <div class="miniTemp">
                This list view item's rating is: {{item.data.rating}}
            </div>
        </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>

Is this bad way to do it? How is this supposed to do?

Thank you for your support, XDVarpunen

winjs / angular-winjs

How to access data-win-options in Angular-winjs? #67

winControl and processAll