javascript - 单击时 AngularJS 在 Controller 中更改部分

Question

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

但是，我希望这个 View 在这个模块中被隔离，这样我就可以同时使用我的其他模块(我根本不想切换页面)。

可以在此处找到我正在尝试实现的示例:http://jsfiddle.net/5LgCZ/

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

这是我目前所知道的，但我不知道如何构建和处理 Controller 和 View 方面的问题:

<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，以便您可以轻松地在这些状态之间共享数据。

这是您更新的 fiddle :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 变量的值，它会自动显示所需的小部件 View 。此外，引入的 selectedFruit 变量保存要在详细信息 View 中操作的项目的引用。

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

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