AngularJS范围不绑定ng-repeat中的数据

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.

我正在开发一个单页面应用程序，它从网站上检索博客供稿。我使用jQuery AJAX获取JSON，并将值赋给“$ scope.entries”变量，但它不反映View中的更改。

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

由于AngularJS是双向数据绑定，我猜数据必须自动绑定，

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.

loadData（）加载使用Angular服务加载的数据。现在，当我将数据分配给$ scope.entries变量时，它不会自动绑定。

am I missing something here ?

我在这里错过了什么吗？

1 个解决方案

#1

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.

Angular使用双向绑定，但在这种情况下您提到的情况是$ scope.entires数组在您尝试将项目推入控制器时会失去其在控制器中的作用域。

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.

更好的方法是使用$ http服务来做这件事，所有的事情都应该用于我的服务。通过这种方式，代码更加可用，可读并且松散耦合。

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>

#1