Ryan Smith
Ryan Smith

Reputation: 1335

Data binding not working?

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

Answers (1)

mpm
mpm

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

Related Questions