8

我正在开发一个仪表板应用程序，您可以在其中同时显示一组模块。我想为这些模块添加多个“视图”。例如，Github 模块的第一个视图是您的存储库列表。当您单击该模块中的存储库链接时，该模块中的该视图将被一个新屏幕替换，该屏幕显示有关该存储库的所有详细信息。

但是，我希望这个视图在这个模块中被隔离，这样我就可以同时继续使用我的其他模块（我根本不想切换页面）。

我试图实现的一个例子可以在这里找到：http: //jsfiddle.net/5LgCZ/

在此示例中，您将单击水果或汽车，并在新视图中获取有关该模块中所述项目的详细信息。（它目前只是执行警报）。

这是我到目前为止所拥有的，但就控制器和视图而言，我不知道如何构造和处理它：

<div ng-app="app">
    <div class="module" ng-controller="FruitCtrl">
        <h1>Fruit Module</h1>
        <ul>
            <li ng-repeat="fruit in fruits"><a href="#" ng-click="showDetail(fruit)">{{fruit}}</a></li>
        </ul>
    </div>
    <div class="module" ng-controller="CarCtrl">
        <h1>Car Module</h1>
        <ul>
            <li ng-repeat="car in cars"><a href="#" ng-click="showDetail(car)">{{car}}</a></li>
        </ul>
    </div>
</div>

提前感谢任何能够提供帮助的人。

4

2 回答 2

22

如果您不想在同一个 HTML 元素中显示几个状态，则可以利用内置ng-switch指令。这将允许您切换元素的内容，同时保持不变，$scope以便您可以轻松地在这些状态之间共享数据。

这是您更新的小提琴：http: //jsfiddle.net/dVFeN/下面是解释。

在您的示例中，它可能如下所示：

HTML

<div class="module" ng-controller="FruitCtrl">
    <h1>Fruit Module</h1>
    <div ng-switch="moduleState">
        <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>
    </div>
</div>

调用的额外变量moduleState定义了小部件的当前状态。由于该ng-switch指令，外部元素的内容会div根据传递给其ng-switch-when属性的值在内部元素之间自动切换。

JS

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

    $scope.fruits = ['Banana', 'Orange', 'Apple'];

    $scope.showDetail = function(fruit)
    {
        $scope.selectedFruit = fruit;

        $scope.moduleState = 'details';
    };

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

您所要做的就是修改moduleState变量的值，它会自动显示所需的小部件视图。此外，引入的selectedFruit变量包含要在详细信息视图中操作的项目的引用。

使用该ng-switch指令的优点是您可以以一致的方式轻松地将任意数量的状态添加到您的小部件。

您可以相应地修改您的第二个模块。

于 2013-05-20T14:30:14.647 回答
0

我不完全确定您所说的 a 是什么意思，new view可能有几种方法可以做到这一点，但只是为了让您开始使用最简单的方法之一（在我看来），您可以为每个模块设置一个 details 元素根据选择显示/隐藏：

<div class="module" ng-controller="FruitCtrl">
    <h1>Fruit Module</h1>
    <ul ng-show='!fruitSelected'>
        <li ng-repeat="fruit in fruits"><a href="#" ng-click="showDetail(fruit)">{{fruit}}</a></li>
    </ul>
    <div class="details" ng-show="fruitSelected">{{fruitSelected}}</div>
</div>

function FruitCtrl($scope) {
    $scope.fruits = ['Banana', 'Orange', 'Apple'];
    $scope.fruitSelected = false;
    $scope.showDetail = function (fruit) {
        $scope.fruitSelected = fruit;
    }
}
于 2013-05-20T14:29:29.103 回答