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

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