加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

AngularJS:具有路由的多个视图,不会丢失范围

发布时间:2020-12-17 07:38:55 所属栏目:安全 来源:网络整理
导读:我试图实现一个经典的列表/细节UI.当单击列表中的项目时,我想在仍显示列表的同时显示该项目的编辑表单.我正在努力解决Angular的每页1页的限制,并决定将所有网址路由到同一个控制器/视图. (也许这是我问题的根源,我可以选择替代方案.) 路由: $routeProvider
我试图实现一个经典的列表/细节UI.当单击列表中的项目时,我想在仍显示列表的同时显示该项目的编辑表单.我正在努力解决Angular的每页1页的限制,并决定将所有网址路由到同一个控制器/视图. (也许这是我问题的根源,我可以选择替代方案.)

路由:

$routeProvider
    .when('/list',{ templateUrl: '/Partials/Users.html',controller: UserController })
    .when('/edit/:UserId',controller: UserController })
    .otherwise({ redirectTo: '/list' });

视图(/Partials/Users.html):

<!-- List of users -->
<div ng-repeat="user in Users">
    <a href="*/edit/{{ user.Id }}">Edit {{ user.Name }}</a>
</div>

<!-- Edit form -->
<div>
    {{ SelectedUser.Name }}
</div>

控制器:

function UserController($scope,$routeParams) {
    // the model for the list
    $scope.Users = GetUserListFromService();

    // the model for the edit form
    if ($routeParams.UserId != null)
        $scope.SelectedUser = GetUserFromService($routeParams.UserId);
}

问题:

>当单击编辑链接时,控制器将重新启动一个新的范围,所以我必须重新启动用户列表. (在一个更复杂的例子中,我可以从用户存储的输入绑定到模型,这也将丢失.)我更喜欢坚持从上一个路由的范围.
>我更喜欢使用一个单独的控制器(或许多其他Angular开发人员抱怨,具有多个显示视图的能力),但是导致同样的丢失范围的问题.

尝试使用ui-router: http://github.com/angular-ui/ui-router.

它们具有嵌套视图,并且比角度默认路由更易于状态管理:-)

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读