如何在 AngularJS 中使用 stateParameters（不是路由）在视图之间传递数据

Question

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

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

我的 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);
        });

下面的控制器是给我看单条新闻的控制器，我写了一些代码但不正确。在 URL 中，我获得了 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 匹配，然后相应地显示数据，但它似乎不起作用

Answer 1

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

    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 范围变量由找到的 post 初始化。

也就是说，我很难理解为什么您要从后端获取 post 的完整列表，而不是使用按 ID 返回单个 post 的 REST 服务。如果你这样做，它将减少到

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

如何在 AngularJS 中使用 stateParameters（不是路由）在视图之间传递数据

How to pass data between views using stateParameters (not routes) in AngularJS

state

controller

angularjs