如何使用 Angular JS 在状态之间导航

How to navigate between states with Angular JS

本文关键字：状态 之间 导航 JS 何使用 Angular      更新时间：2023-09-26

我正在编写代码来显示一个简单的用户列表。当单击用户时，我想进入包含有关该用户信息的视图。我已经到了在列表中显示用户的地步，当我单击用户时，我会进入我创建的视图。我的问题是在哪里为所有用户添加视图以及如何正确显示它们：

这是我到目前为止得到的：

UsersCtrl.$inject = ['$scope'];
    function EventsCtrl($scope {
        $scope.events = [
        { Name: 'User1', id: 1, image: 'logo1.jpg' },
        { Name: 'User2', id: 2, image: 'logo2.jpg' },
        ];
}
 UsersCtrl.$inject = ['$scope'];
    function UserCtrl($scope, '$routeParams') {
 $scope.userId = $routeParams.userId;
    }

在应用程序中.js ：

 .state('app.users', {
                    url: "/users",
                    views: {
                        'appScreen': {
                            templateUrl: "users.html",
                            controller: 'UsersCtrl'
                        }
                    }
                })
                 .state('app.userV', {
                     url: "/users/:usersId",
                     views: {
                         'appScreen': {
                             templateUrl: "user.html",
                             controller: 'UsersCtrl'
                         }
                     }
                 })

在我的索引中.html

<script type="text/ng-template" id="users.html">
        <ion-view  view-title="Users">
            <ion-content> 
                <div class="list">
                            <a class="item item-thumbnail-left" ng-repeat="user in users" ui-sref="app.userV({userId: user.id})">
                                <img ng-src="{{user.image }}">
                                <h2>{{user.Name}}</h2>
                            </a>
                </div>  
            </ion-content>
        </ion-view>
    </script>
<script type="text/ng-template" id="user.html">
        <ion-view view-title="User">
            <ion-content>
                <div class="list card">
                    <div class="item item-avatar">
                        <img src="User1.jpg">
                        <h2>User 1 </h2>
                    </div>
                    <div class="item item-body">
                        <img class="full-image" src="/Content/img/P9090246.jpg">
                        <p>
                            This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
                            the content is from a card-body consisting of an image and paragraph text. 
                        </p>
                    </div>
                </div>
            </ion-content>
        </ion-view>
    </script>

所以你已经很好地完成了设置。您希望将 html 的结构放在 user.html（您为查看特定用户而创建的新页面）中。 但是html只是一个模板，每个用户都是相同的（如显示名称，在此处显示图像等）。 在该 html 中，您希望使用通过 url 传递的 id 作为参数包含特定用户的角度绑定。 希望这有所帮助

编辑：（有关更多信息）因此，构建一个称为userDetailCtrl之类的不同控制器可能会更容易。 并在ngRoute结构中匹配它。 在该控制器中，与注入$scope的方式相同，您希望注入$routeParams。 像这样：

mainAppControllers.controller('userDetailCtrl', ['$scope', '$routeParams', function($scope, $routeParams) {
    $scope.userId = $routeParams.userId;
}]);

然后，您将拥有该用户ID，并且可以获取相应的信息。 从本质上讲，您正在使用Angular的注入功能将信息传递给控制器。

您可以使用ui-sref而不是href定位点来定位状态。

此外，如果要导航到子状态并查看与父状态相同的页面上的内容，则应执行以下操作

<!-- this is parentState view-->
<div ui-view>
some content will get pulled in from parent template file
<a ui-sref="parentState.childState">click me to go load child state</a>
<div ui-view>
  This will pull in the template from parentState.childstate
</div>
</div>
相关文章：