AngularJS change partial in controller on click

Question

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

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.

Answer 1

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.

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>

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

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.

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.