Question

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

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

这是代码，

<!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（）加载使用Angular服务加载的数据。现在，当我将数据分配给$ scope.entries变量时，它不会自动绑定。

我在这里错过了什么吗？

Answer 1

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

更好的方法是使用$http服务执行此操作，并且所有操作都应该用于myservice服务。通过这种方式，代码更易于使用，可读且松散耦合。

我这样做了。可能对你有帮助。如果您发现任何其他方法，请发布。

<!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>

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

1 个答案: