AngularJS 单击时更改控制器中的部分内容

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

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

我想要实现的目标的一个例子可以在这里找到：http://jsfiddle.net/5LgCZ/ 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>

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

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

这是您更新的小提琴：http://jsfiddle.net/dVFeN/ 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指令是您可以轻松地以一致的方式向您的小部件添加任意数量的状态。

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