winjs / angular-winjs

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

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

Closed ed-ilyin closed 9 years ago

ed-ilyin commented 9 years ago

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
TheWrathOfConst commented 9 years ago

Should now be fixed via commit 7b4d223