supplying AngularJS controller data

Question

Assuming a controller is there to manipulate some data on the scope, what is the best practice to supply the controller with that data?

For example, if I have a list of items I might want a ListController to manipulate the list, and an ItemController to manipulate an individual item. But how do I give each ItemController an item to use?

In the case below, how would doSomethingToItem access the item. When nested in the ngRepeat the item is $scope.item, but in the selection view the item we want to manipulate is $scope.selection.

angular.module('MyApp', [])

    .controller('ListController', function($scope, $http) {

        $scope.list = $http.get(...);

        $scope.selection = null;

    })

    .controller('ItemController', function($scope) {

        $scope.doSomethingToItem = function() {
            ...
        };

    })


<div ng-controller="ListController">
    <div ng-repeat="item in list" ng-click="selection = item">
        <div ng-controller="ItemController">
            <button ng-click="doSomethingToItem()">Do Something</button>
        </div>
    </div>
    <div ng-show="selection"
        <div ng-controller="ItemController">
            <button ng-click="doSomethingToItem()">Do Something</button>
        </div>
    </div>
</div>

Isn't this a common structure, or is my thinking backwards?

Answer 1

You should understand that Angular would create n+1 ItemController in your case. N for items and 1 for the selection section.

To make passing the object that needs to be worked on easier you can change the method signature to

doSomethingToItem(item) and in html do

<button ng-click="doSomethingToItem(item)">Do Something</button> at both places.

Or else for the repeat case the item variable contains your object that you can access in ItemController

selection variable contains the reference to the select controller, which can be reference from the instance of the controller defined under selection section.

Update: The expression in ng-repeat and selection would differ

<button ng-click="doSomethingToItem(item)">Do Something</button>

and

 <div ng-show="selection"
        <div ng-controller="ItemController">
            <button ng-click="doSomethingToItem(selection)">Do Something</button>
        </div>
    </div>