Javascript 使用winjs ListView时无法获取选择

我正在使用显示列表。下面是HTML以及控制器代码。单击项目时，未设置选择。因此，手表永远不会被调用

如何在选择变量中获取所选项目？我的代码看起来与类似，但仍然存在问题。我正在使用最新的WinJS

<div ng-app="myApp">
    <div ng-controller="HomeTilesController">
        <div>Selected count: {{selection.length}}, indexes: {{selection}}</div>
        <win-list-view item-data-source="homeTiles" selection-mode="'single'" selection="selection">
            <win-item-template>
                <div class="tile">
                    <h5 class="win-h5">{{item.data.title}}</</h5>
                </div>
            </win-item-template>
            <win-grid-layout></win-grid-layout>
        </win-list-view>
    </div>
</div>

瓷砖显示正确，如下所示。您可能会注意到，由于设置了选择而选择的中间平铺（带蓝色边框的平铺）。但是任何其他选择仍显示相同的值-选择任何其他项目不会设置选择

图书馆如下：

    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
    <script src="~/lib/hammer.js/hammer.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="~/lib/angular/angular.min.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.dev.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/css/ui-light.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/js/base.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/js/ui.js"></script>
    <script src="https://cdn.rawgit.com/winjs/angular-winjs/master/js/angular-winjs.js"></script>
    <script src="~/app/my-app.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <script src="~/js/site.js" asp-append-version="true"></script>

---

您必须使用

选择模式=“'single'”点击行为=“'directSelect'”

HTML

所选计数：{selection.length}，索引：{{selection.toString（）}
此列表视图项的评级为：{{item.data.rating}

工作代码

（从下拉列表中选择）

    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
    <script src="~/lib/hammer.js/hammer.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="~/lib/angular/angular.min.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.dev.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/css/ui-light.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/js/base.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/js/ui.js"></script>
    <script src="https://cdn.rawgit.com/winjs/angular-winjs/master/js/angular-winjs.js"></script>
    <script src="~/app/my-app.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <script src="~/js/site.js" asp-append-version="true"></script>

var myApp = angular.module("myApp", ['winjs']);
myApp.controller("myCtrl", ['$scope', myCtrl]);

function myCtrl($scope) {
    $scope.selection = [];
    $scope.homeTiles = [{
        title: 'A1'
    }, {
        title: 'A2'
    }, {
        title: 'A3'
    }, {
        title: 'A4'
    }, {
        title: 'A5'
    }, {
        title: 'A6'
    }];
}

<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <div>Selected count: {{selection.length}}, indexes: {{selection.toString()}}</div>
        <win-list-view item-data-source="homeTiles" selection="selection" selection-mode="'single'" tap-behavior="'directSelect'" class="listview win-selectionstylefilled">

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