Call another controller from inside ng-repeat

Question

I am new to angular and I am trying to call a function from another Controller. I do not want to define an addIssue function in ItemsController which calls IssuesController.addIssue or share a service, but directly reference the IssuesController. Is there any way to do that?

Here is my sample code:

<div ng-controller="ItemsController">
    <ul ng-repeat="item in items">
        <li><a href ng-click="addIssue(item)">{{item.name}}</a></li>
    </ul>
</div>

<div ng-controller="IssuesController">
    <ul ng-repeat="issue in issues">
        <li>{{issue.name}}</li>
    </ul>
</div>

<script>
    angular.module('app').controller("IssuesController", function () {
        $scope.issues = [];
        $scope.addIssue = function (item) {
            // Add Issue
        }
    });
</script>

UPDATE:

What if I have a third base controller to help them share $scope, how will that work?

<div ng-controller="OrdersController">
    <div ng-controller="ItemsController">
        <ul ng-repeat="item in items">
            <li><a href ng-click="addIssue(item)">{{item.name}}</a></li>
        </ul>
    </div>
    <div ng-controller="IssuesController">
        <ul ng-repeat="issue in issues">
            <li>{{issue.name}}</li>
        </ul>
    </div>
</div>

If I'm understanding you correctly, you want to call a controller from another controller? See this: http://stackoverflow.com/questions/9293423/can-one-controller-call-another-in-angularjs — SoluableNonagon, Jan 13 '14 at 19:24

Alex Choroshin · Answer 1 · 2014-01-13T19:50:50.787

1

As EliteOctagon mentioned, there are other and probably more "best practice" ways to achieve your goal but you can always do this the "dirty" way, you can use $rootScope in your ItemsController to call the addIssue(item) function on IssuesController, and since all other scopes are descendant scopes of the $rootScope you can use it in any controller.

Example: http://jsfiddle.net/choroshin/5YDJW/2/

edited Jan 13 '14 at 19:50

answered Jan 13 '14 at 19:40

Alex Choroshin

6,177
2
28
36

1

I like this solution, even if it is 'dirty' – SoluableNonagon Jan 13 '14 at 19:45
I know this is a bit old but you may want to look at doing a `$rootScope.$emit('addIssueEvent', item);` in the item controller and in the issue controller `$rootScope.$on('addIssueEvent', function(item) {/*do stuff*/});` This way you will maintain uncoupled controllers – O'Mutt Jul 22 '14 at 15:25

score 0 · Answer 2 · answered Jan 13 '14 at 19:29

There is, but it's such a terrible idea that you should think about it thoroughly. A much better solution would be to put that functionality into a parent controller. Obviously you have functionality that is much broader in scope (pun intended) then just that div with the IssuesController.

Provided your code is a realistic sample, then addIssue() is not even used there. So it wouldn't even make sense to put it there.

One way to directly access addIssue is:

angular.element(/*select your div*/).scope().addIssue(item);

How you select your div depends. If i has an id you can use that. If you use jQuery then you can use [ng-controller= ItemsController].

I saw that in another answer, but I agree it is a terrible idea. — Ivo Sabev, Jan 13 '14 at 19:49

SoluableNonagon · Answer 3 · 2014-01-13T19:51:17.053

Why don't you nest the controllers? You can read the Scope Inheritance Example at http://docs.angularjs.org/guide/controller

<div ng-controller="ItemsController">
    <ul ng-repeat="item in items">
        <li><a href ng-click="addIssue(item)">{{item.name}}</a></li>
    </ul>

    <div ng-controller="IssuesController"> <!-- nested and will inherit scope -->
        <ul ng-repeat="issue in issues">
            <li>{{issue.name}}</li>
        </ul>
    </div>
</div>

so if you have a function in ItemsController

 $scope.addIssue = function() {do something}

then the IssuesController will inherit the $scope and you'll be able to use that function.

I did not want to nest them, because they are not that much related. — Ivo Sabev, Jan 13 '14 at 19:52

Call another controller from inside ng-repeat

UPDATE:

3 Answers3