共享控制器时视图不起作用

Question

我有一个简单的应用程序，它从 Flickr 获取图像并呈现它们。该应用程序分为两个视图，SearchView 和PhotoListView。以前，当将这些视为一个视图时，一切正常，并且渲染了照片。现在，当共享控制器时，两者都会被渲染，但不会填充照片列表。在调试的时候，我可以看到照片确实被抓取了。

我是 Angular 的新手，所以我真的没有很好的猜测问题可能是什么，但可能这两个视图没有正确共享范围？

这是路由（使用ui-router）：

// app.js

'use strict';

angular.module('pruApp', ['ui.state'])
    .config(function ($httpProvider, $stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/photos');
        $stateProvider
            .state('/', {
                url: '/photos',
                views: {
                    'SearchView': {
                        templateUrl: '/views/search.html',
                        controller: 'PhotoCtrl'
                    },
                    'PhotoListView': {
                        templateUrl: '/views/photo-list.html',
                        controller: 'PhotoCtrl'
                    }
                }
            });

        // Remove X-Requested-With header to enable CORS
        delete $httpProvider.defaults.headers.common['X-Requested-With'];
    });

与 Flickr 服务对话的控制器和工厂：

// photo.js

'use strict';

angular.module('pruApp')
    .controller('PhotoCtrl', function ($scope, PhotoFactory) {
        $scope.search = function() {
            PhotoFactory.getPhotos($scope.searchQuery).then(function (data) {
                $scope.photos = [];

                var parsedData = angular.fromJson(data);
                var items = parsedData.photos.photo;

                for (var i = 0; i < items.length; ++i) {
                    var photo = items[i];
                    $scope.photos.push({
                        title: photo.title,
                        image: 'http://farm' + photo.farm + '.staticflickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret + '_m.jpg',
                        link: 'http://www.flickr.com/photos/' + photo.owner + '/' + photo.id
                    });
                }
            });
        };
    });

angular.module('pruApp')
    .factory('PhotoFactory', function ($http, $q) {
        return {
            _get: function(url) {
                var deferred = $q.defer();

                $http.get(url)
                    .success(function (data) {
                        deferred.resolve(data);
                    })
                    .error(function (data, status) {
                        deferred.reject('An error occured: ' + status);
                    });

                return deferred.promise;
            },
            getPhotos: function (searchQuery) {
                return this._get('http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=<MY_KEY>&tags=' + searchQuery + '&format=json&nojsoncallback=1');
            }
        };
    });

这是视图被注入的地方：

<!-- index.html -->

<div class="main" role="main">
    <div class="search" ui-view="SearchView"></div>
    <div class="results" ui-view="PhotoListView"></div>
</div>

搜索模板：

<!-- search.html -->

<h2 class="struct">Search</h2>
<form>
    <fieldset>
        <div class="cell">
            <input type="search" name="search-query" class="search-query" placeholder="Search photos by tags (e.g. lolcat, rageface, bronie)" ng-model="searchQuery" required>
        </div>
        <div class="cell">
            <button type="submit" name="search-button" class="search-button" ng-click="search()">Search</button>
        </div>
    </fieldset>
</form>

照片列表模板：

<!-- photo-list.html -->

<h2 class="struct">Search results</h2>
<ul>
    <li ng-repeat="photo in photos">
        <h3>{{ photo.title }}</h3>
        <a href="{{ photo.link }}"><img ng-src="{{ photo.image }}" alt="{{ photo.title }}"></a>
        <p class="author">Author: <span>{{ photo.author }}</span></p>
    </li>
</ul>

Answer 1

所以您的问题似乎是您正在调用该方法来获取控制器的一个实例上的照片，但它不与您的另一个控制器共享数据。在第一次阅读时，我错过了您的工厂定义，但问题仍然是控制器范围内的变量位于不同的实例中。

处理这个问题的方法是始终从工厂/服务返回一个承诺给控制器，在控制器中使用承诺分配范围。这样，如果服务已有数据可用，它将自动填充到您的控制器范围内，如果没有可用数据，则可以立即填充。

确实，看起来您正在执行我在上一段中所说的操作，但我看不到在控制器中调用搜索功能的位置。本质上，您应该在控制器中有一些东西直接从服务中填充 $scope.photos 数组。然后，您应该分别拥有搜索功能，该功能会触发对传递参数的服务的调用。

另一种选择是 $watch 您在工厂/服务中的属性，并在更改时更新控制器 $scope 中的变量。

angular.module('pruApp')
    .factory('PhotoFactory', function ($http, $q) {
        return {
            photos: [],
            _get: function(url) {
                var deferred = $q.defer();

                $http.get(url)
                    .success(function (data) {
                        this.photos = [];

                        var parsedData = angular.fromJson(data);
                        var items = parsedData.photos.photo;

                        for (var i = 0; i < items.length; ++i) {
                            var photo = items[i];
                            this.photos.push({
                                title: photo.title,
                                image: 'http://farm' + photo.farm + '.staticflickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret + '_m.jpg',
                                link: 'http://www.flickr.com/photos/' + photo.owner + '/' + photo.id
                            });
                        }
                        deferred.resolve(data);
                    })
                    .error(function (data, status) {
                        deferred.reject('An error occured: ' + status);
                    });

                return deferred.promise;
            },
            getPhotos: function (searchQuery) {
                return this._get('http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=<MY_KEY>&tags=' + searchQuery + '&format=json&nojsoncallback=1');
            }
        };
    });

在控制器中

angular.module('pruApp')
    .controller('PhotoCtrl', function ($scope, PhotoFactory) {
            $scope.$watch(function () { return PhotoFactory.photos; }, function(data) {
                 $scope.photos = data;
            }); // initialize the watch

            $scope.search = function() {
                PhotoFactory.getPhotos($scope.searchQuery);
            };
        }
    });