AngularJS在控制器上单击更改部分 [英] AngularJS change partial in controller on click

问题描述

我的工作，你有一组在同一时间显示模块的仪表板应用程序。我想添加多个若干意见对这些模块。例如，Github上模块的第一个观点是你的储存库的清单。当您单击模块中的链接库，该模块在该视图将与显示所有有关回购的详细信息新的屏幕所取代。

I'm working on a dashboard application where you have a set of modules displayed at the same time. I'd like to add multiple 'views' to these modules. For example, the first view of a Github module is a list of your repositories. When you click a repository link in that module, that view in the module would be replaced with a new screen showing all the detailed info about that repo.

不过，我想这个观点来此模块中被孤立，所以我可以继续使用我的其它模块在同一时间（我不希望切换页面的话）。

However, I want this view to be isolated in this module so I can keep using my other modules at the same time (I do not want to switch pages at all).

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

An example of what I'm trying to achieve can be found here: http://jsfiddle.net/5LgCZ/

在这个例子中，你会点击一个水果或汽车，并获取有关该物品在一个新的观点详细信息，该模块中。 （它目前只是进行警报）。

In this example, you would click a fruit or a car and get detailed info about said item in that module in a new view. (it currently just performs an alert).

这是我到目前为止，但我不知道如何组织并处理这个尽可能的控制器和视图去：

This is what I have so far, but I have no idea how to structure and approach this as far as controllers and views go:

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

在此先感谢的人谁就能帮助。

Thanks in advance for anyone who will be able to help.

推荐答案

如果您wan't一对夫妇在同一个HTML元素内显示的状态，您可以利用内置的 NG-切换指令。这将允许你同时在同一时间保持相同的切换元素的含量 $范围让你可以轻松分享这些国家之间的数据。

If you wan't a couple of states to be displayed within the same HTML element, you can leverage the built-in ng-switch directive. This will allow you to switch content of the element while at the same time maintaining the same $scope so you can easily share the data between those states.

这是你更新的提琴： http://jsfiddle.net/dVFeN/ 并低于去解释

Here's your updated fiddle: http://jsfiddle.net/dVFeN/ and below goes the explanation.

在你的榜样的情况下，它可能是这样的：

In case of your example, it could look like this:

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-开关指令的内容外 DIV 基于传递的价值观内部元素之间自动切换他们的 NG-开关时属性。

The extra variable called moduleState defines the current state of the widget. Thanks to the ng-switch directive the content of the outer div automatically switches between inner elements based on the values passed to their ng-switch-when attributes.

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 变量保存项目的引用在详细视图中采取行动。

All you have to do here is to modify the value of the moduleState variable, which automatically shows the desired widget view. Additionally, the introduced selectedFruit variable holds the reference of the item to act on in the details view.

使用 NG-开关指令的好处是，你可以轻松地添加任意数量的国家对你的widget一致的方式。

The advantage of using the ng-switch directive is that you can easily add any number of states to your widget in a consistent manner.

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

You can modify your second module accordingly.

这篇关于AngularJS在控制器上单击更改部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！