Question

将特定数据传递给视图控制器的最佳方法是什么？

我想象它如何工作你会为对象添加一个额外的属性。例如'data' 见下面的例子。

配置：

.config(function ($stateProvider, $urlRouterProvider) {
            $stateProvider
                .state('app', {
                    url: '/app',
                    abstract: true,
                    templateUrl: 'templates/main.html',
                    controller: 'AppCtrl'
                })

                .state('app.home', {
                    url: '/home',
                    views: {
                        'menuContent': {
                            templateUrl: 'templates/home.html',
                            controller: 'pageController',
                            data: {foo: 'bar'}
                        }
                    }
                })

                .state('app.our-story', {
                    url: '/our-story',
                    views: {
                        'menuContent': {
                            templateUrl: 'templates/our-story.html',
                            controller: 'pageController',
                            data: {foo: 'bar2'}
                        }
                    }
                });

控制器：

angular.module('app.controllers', [])
    .controller('pageController', function ($scope, $ionicModal, $timeout, $stateParams) {
        //Data passed from route config
        console.log(data);

    });

Answer 1

我建议使用resolve将数据填充到服务中，然后由控制器注入和使用，如下所示：

.config(function ($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('app', {
                url: '/app',
                abstract: true,
                templateUrl: 'templates/main.html',
                controller: 'AppCtrl',
                resolve: {
                    somePromise: function(injectedService){
                        return injectedService.getSomeData();
                    }
                }
            })

            .state('app.home', {
                url: '/home',
                views: {
                    'menuContent': {
                        templateUrl: 'templates/home.html',
                        data: {foo: 'bar'}
                    }
                }
            })

            .state('app.our-story', {
                url: '/our-story',
                views: {
                    'menuContent': {
                        templateUrl: 'templates/our-story.html',
                        data: {foo: 'bar2'}
                    }
                }
            });

回到服务中，可以将获取一些数据的结果设置为某个私有变量，并创建一个函数来返回所述变量，如下所示：

myApp.service('injectedService', ['injectedRepository', function(injectedRepository){
    var data;

    return {
        getSomeData: function(){
            injectedRepository.then(function(response){
                data = response.data;
            });
        },
        getData: function(){
            return data;
        }
    };
}]);

最后，人们会将服务注入控制器并使用该服务来检索所需数据的值。

myApp.controller('myCtrl', ['$scope', 'injectedService', function($scope, injectedService){
    $scope.data = injectedService.getData();
});

这有帮助吗？

特定于路线的AngularJS数据

1 个答案: