Question

我正在开发一个仪表板应用程序，您可以同时显示一组模块。我想为这些模块添加多个“视图”。例如，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>

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

Answer 1

如果您要在同一个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指令的优点是您可以以一致的方式轻松地向窗口小部件添加任意数量的状态。

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

Answer 2

我不完全确定new view你的意思，并且可能有几种方法可以做到这一点，但只是为了让你开始使用最简单的（在我看来），你可以拥有根据选择显示/隐藏的每个模块的详细信息元素：

<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;
    }
}

AngularJS在点击时改变控制器中的部分

2 个答案: