-1

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>
Ivo Sabev
  • 5,230
  • 1
  • 26
  • 38
  • 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

3 Answers3

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/

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
0

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

a better oliver
  • 26,330
  • 2
  • 58
  • 66
0

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.

SoluableNonagon
  • 11,541
  • 11
  • 53
  • 98