Question

我正在构建一个MEAN SPA，我正在处理的当前页面显示数据库中的用户。我对Angular很陌生，所以我仍然试图绕过它。

我有一个父容器，其内容由<ng-switch>控制，并根据用户是否点击了“全部查看”或“添加新内容”切换显示相关内容。这很好。

我现在打算做的是当用户点击“全部查看”中显示的用户时，我希望内容切换到包含用户详细信息的视图，然后他们可以去编辑个人资料等。实现这一目标的最佳方法是什么？

我的HTML设置如下：

主要员工观点

<div class="staff" ng-controller="staffController">
    <div class="side-menu">
        <h2>Staff</h2>
        <ul>
            <li><a ng-click="tab='view-all'"><i class="fa fa-user"></i> View All</a></li>
            <li><a ng-click="tab='add-new'"><i class="fa fa-plus"></i> Add New</a></li>
        </ul>
    </div>

    <div class="page-content" ng-switch on="tab">
        <div ng-switch-when="view-all" class="tab-content">
            <staff-view-all></staff-view-all>
        </div>
        <div ng-switch-when="add-new" class="tab-content">
            <staff-add-new></staff-add-new>
        </div>
    </div>
</div>

指令：

.directive('staffViewAll', function () {
        return {
            restrict: 'E',
            templateUrl: 'partials/staff/view-all.ejs'
        }
    })

.directive('staffAddNew', function () {
        return {
            restrict: 'E',
            templateUrl: 'partials/staff/add-new.ejs'
        }
    })

查看-all.ejs

<h2>View all staff</h2>

{{ users.length }} users in system

<ul>
    <li ng-repeat="user in users"> <!-- click this and you see the singular view -->
        <img ng-src="{{user.avatar}}?dim=100x100" />
        <h3>{{user.username}}</h3>
        <h4>{{user.email}}</h4>
    </li>
</ul>

Answer 1

使用其他ng-switch切换到所选用户的详细视图。

像这样：jsfiddle

<div ng-switch-when="list">
    <ul>
        <li ng-repeat="fruit in fruits">
            <a href="#"ng-click="showDetail(fruit)">{{fruit}}</a>
        </li>
    </ul>
</div>
<div ng-switch-when="details">
    <p>Details for {{ selectedFruit }}</p>
    <a href="#" ng-click="showList()">Back to list</a>
</div>

控制器：

    $scope.showDetail = function (fruit) {
        $scope.selectedFruit = fruit;
        $scope.moduleState = 'details';
    }

    $scope.showList = function()
    {
        $scope.moduleState = 'list';
    };

嵌套角度开关？

1 个答案: