Reputation: 1335
The browser only renders {"data":[]}
to the page and does not update once the promise is resolved, however window.sc
shows that the data is fetched and added to the scope successfully, but the browser does not show this. Why is this happening?
index.html.jade
head
meta(charset='utf-8')
title Badsey Fantasy Cricket
script(src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js')
script(src='https://www.parse.com/downloads/javascript/parse-1.2.18.min.js')
script(src='vendor/facebook/all.js')
link(rel='stylesheet', href='index.css')
body()
div(ng-app='fantasyCricket')
div(ng-controller='PlayersCtrl')
h1 {{players}}
script(src='index.js')
index.js.coffee
fantasyCricket = angular.module('fantasyCricket', [() ->
# Initialises Parse SDK.
Parse.initialize("####", "####")
# Initialises Parse FacebookUtils.
Parse.FacebookUtils.init({
appId: "####"
cookie: true
xfbml: true
})
])
fantasyCricket.factory('Players', () ->
obj = {
data: []
refresh: () ->
(new Parse.Query(Parse.Object.extend('player'))).find()
}
obj
)
fantasyCricket.controller('PlayersCtrl', ['$scope', 'Players', ($scope, Players) ->
$scope.players = Players
window.sc = $scope
Players.refresh().done((players) ->
$scope.players.data.splice.apply($scope.players.data, [0, 0].concat(players))
).fail((err) -> alert('Failed to load players'))
])
Upvotes: 0
Views: 76
Reputation: 20154
try to call $scope.$apply in the refresh callback
Players.refresh().done((players) ->
$scope.players.data.splice.apply($scope.players.data, [0, 0].concat(players))
$scope.$apply();
).fail((err) -> alert('Failed to load players'))
you can also use push instead of splice
$scope.players.data.push.apply($scope.players.data,players);
$scope.$apply();
Upvotes: 1