AngularJS scope not binding data in ng-repeat

Question

I am developing a single page application which retrieves blog feeds from a website. I got JSON using jQuery AJAX, and assigned the value to the "$scope.entries" variable, but its not reflecting the changes in View.

Since AngularJS is a two way data binding I guess the data must be binded automatically,

Here is the code,

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-resource.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
        var myApp = angular.module("myApp", []);
        myApp.controller('picCtrl', function ($scope, myservice) {
            $scope.entries = [];
            $scope.message = "Welcome";

            myservice.jsonNews().then(loadData);
            function loadData(data) {
                //Data Loaded from AJAX Call
                debugger;
                console.log(data);
                angular.forEach(data.entry, function (entryX) {
                    $scope.entries.push(entryX);
                })
            };
        });

        myApp.service('myservice', function ($http, $q) {
            return ({
                jsonNews: jsonNews
            });
            function jsonNews() {
                var BlogFeeds = "//www.blogger.com/feeds/7833828309523986982/posts/default?start-index=0001&max-results=10&alt=json";
                var request = $.ajax({ url: BlogFeeds, dataType: 'jsonp' });

                return (request.then(handleSuccess));
            }
            function handleSuccess(response) {
                return (response.feed);
            }
        });

    </script>

</head>
<body>
    <div ng-app="myApp">
        <div ng-controller="picCtrl">
            {{message}}
            <span ng-repeat="entry in entries">
                <span >
                    <img ng-src="{{entry.media$thumbnail.url}}" />
                    {{entry.title.$t}}
                </span>
            </span>


        </div>
    </div>

</body>
</html>

loadData() loads data which is loaded using Angular services. Now when I assign the data to $scope.entries variable, it is not binding automatically.

am I missing something here ?

Possibly Using jQuery's $.ajax within an angularJS controller — Jonathan Lonowski
– Jonathan Lonowski, Commented Jun 25, 2014 at 20:18
use $http instead of $.ajax, it's already injected into your service: docs.angularjs.org/api/ng/service/$http — Jonathan Wilson
– Jonathan Wilson, Commented Jun 25, 2014 at 20:19
@Jonathan : I didnt use jQuery AJAX inside Controller, I used only it in service. So It doesnt make any difference to the data. — SenthilKumarM
– SenthilKumarM, Commented Jun 25, 2014 at 20:20
@SenthilKumarM The controller still uses jQuery Ajax, just indirectly through the service. So, the point of the other post likely still applies. — Jonathan Lonowski
– Jonathan Lonowski, Commented Jun 25, 2014 at 20:22
If you use the jQuery $.ajax then you will need to run $scope.apply() to get the data to propogate. As @JonathanWilson says, better to use angular's $http which will start a digest automatically — Simon H
– Simon H, Commented Jun 25, 2014 at 20:22

Artjom B. · Accepted Answer · 2014-06-26 21:22:16Z

Angular use two way binding but the case you mentioned in this case the $scope.entires array looses its scope in controller when you try to push items into it.

The better approach is to do this thing using $http service and all the things should do into myservice service. In this way code is more usable, readable and loosely coupled.

I have done in this way. May be it helps you. If you find any other approach please post it.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Http Jsonp Sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-resource.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
        var myApp = angular.module("myApp", []);

        myApp.service('myservice', ['$http', '$q', function ($http, $q) {
            var entries = [];

            function getData(){
                var arr1 = [];
                var BlogFeeds = "//www.blogger.com/feeds/7833828309523986982/posts/default?start-index=0001&max-results=10&alt=json&callback=JSON_CALLBACK";

                $http.jsonp(BlogFeeds)
                .success(function(data){
                    angular.forEach(data.feed.entry, function(entryX){
                        arr1.push(entryX);
                    });
                    angular.copy(arr1, entries);
                })
                .error(function (data) {
                    $scope.data = "Request failed";
                });
            }

            return {
                getData: getData,
                entries: entries
            };

        }]);


        myApp.controller('picCtrl', function ($scope, myservice) {

            $scope.message = "Welcome";
            $scope.entries = myservice.entries;

            myservice.getData();

        });

    </script>

</head>
<body>
    <div ng-app="myApp">
        <div ng-controller="picCtrl">
            {{message}}
            <span ng-repeat="entry in entries">
                <span >
                    <img ng-src="{{entry.media$thumbnail.url}}" />
                    {{entry.title.$t}}
                </span>
            </span>
        </div>
    </div>
</body>
</html>

Collectives™ on Stack Overflow

AngularJS scope not binding data in ng-repeat

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related