如何使用AngularJS中的stateParameters(而不是路由)在视图之间传递数据

时间:2015-01-25 15:35:42

标签: angularjs controller state

我的应用程序中有一些视图,当从一个视图移动到另一个视图时,我很难显示数据。

我有一个新闻列表,当我点击特定新闻时,我希望显示该特定新闻的视图。这是我的代码:

我的app.js:

 .state('app.list', {
                    url: "/list",
                    views: {
                        'appScreen': {
                            templateUrl: "list.html",
                            controller: 'List.Ctrl'
                        }
                    }
                })

                 .state('app.singleview', {
                     url: "/list/:newsId",
                     views: {
                         'appScreen': {
                             templateUrl: "single.html",
                             controller: 'SingleCtrl'
                         }
                     }
                 })

我的控制器:

ListCtrl.$inject = ['$http', '$scope', 'datacontext'];
    function ListCtrl( $http, $scope, datacontext) {

        $scope.list = [];

        datacontext.getPosts().then(function (posts) {
            console.log('posts', posts);
            $scope.list= posts;
        }, function(reason) {
            alert(reason);
        });

以下控制器是向我显示单个新闻的控制器,我编写了一些代码,但不正确。在网址中,我获得了ID,但我无法显示该ID的数据。

SingleCtrl.$inject = ['$scope', '$stateParams', 'datacontext'];
    function ListNewCtrl($scope, $stateParams, datacontext) {
        $scope.New = getNewsById($stateParams.newsId);
        function getNewsById(id) {
            datacontext.getPosts().then(function(posts) {

                var found = null;
                for (var i = 0; i < posts.length; i++) {
                    if (posts[i].id == id) {
                        found = posts[i];
                        break;
                    }
                }

                return found;
            })
        }

    };

所以在这个控制器中,我想要做的是获取ID并将其与postsId匹配,然后相应地显示数据,但它似乎没有工作

1 个答案:

答案 0 :(得分:2)

你对异步现象感到困惑。代码应该是

    getNewsById($stateParams.newsId);

    function getNewsById(id) {
        datacontext.getPosts().then(function(posts) {

            var found = null;
            for (var i = 0; i < posts.length; i++) {
                if (posts[i].id == id) {
                    $scope.New = posts[i];
                    break;
                }
            }
        });
    }

这样,当执行成功回调时,New范围变量由找到的帖子初始化。

尽管如此,我很难理解为什么你从后端获得一整个帖子列表而不是使用REST服务返回ID的单个帖子。如果你这样做了,那就会减少到

function getNewsById(id) {
    datacontext.getPost(id).then(function(post) {
        $scope.New = post;
    });
}