[英]How to navigate between states with Angular JS
我正在编写代码以显示简单的用户列表。 当单击一个用户时,我想进入一个包含该用户信息的视图。 我已经到达要在列表中显示用户的位置,并且当我单击用户时,我进入了我创建的视图。 我的问题是在哪里为所有用户添加视图以及如何正确显示它们:
这是到目前为止我得到的:
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;
}
在app.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'
}
}
})
在我的Index.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.