In AngularJS, how do you create a function in one controller to change a variable in another controller?

Question

I have been trying to use this example, to call a function from one controller, to another controller. So far, none of my attempts have worked. I currently have a Modal View with buttons inside of it, within the controller ModalViewController. The html for this appears:

<script type="text/ng-template" id="renderedContent.html">
    <div class="modal-header">
        <h3>Detailed View</h3>
    </div>
    <div class="modal-body">
        <ul>
            <li ng-repeat="data in storage">
                <button style="border-radius:5px;color:white;background-color:#777777;border:none;margin:1px;" ng-click="myFunction(data)">
                   <h5 style="font-size:10px;padding:0px;margin:0px;">{{data}}</h5>
                </button>
            </li>
        </ul>
    </div>
    <div class="modal-footer">
        <button class="btn btn-default" ng-click="cancel()">Close</button>
    </div>
</script>

The method myFunction() should set a value in another controller's scope. In particular, I have an input field in the controller InputController, that is basically:

<input type="text" ng-model="inputText"></input>

I am trying to write a function such that I can have something like:

//in ModalViewController
$scope.myFunction = function(data){
    // call InputController
    // set InputController.inputText = data;
}

I do not fully understand the code in the given link entirely. How would I write this function so it does what I'm seeking to do?

Possible duplicate of [AngularJS passing data back from modal](http://stackoverflow.com/questions/21358265/angularjs-passing-data-back-from-modal) — georgeawg, Nov 03 '16 at 20:03

score 0 · Accepted Answer · answered Nov 02 '16 at 20:54

The subject of your question is exactly the purpose that services and factories serve... to share methods(functions) and variables across controllers. You don't call a controller directly from another controller. That violates the single-purpose rule. You use a service to facilitate this communication.

A service is very simple to create:

angular.module('myApp').service('MyService', Myservice);
function MyService() {
  var MyService = this;

  MyService.someVariable = "A";

  MyService.setSomeVariable = function(value) {
    MyService.someVariable = value;
    console.log(Myservice.someVariable);
  };
}

And also easy to inject into your controller(s):

angular.module('myApp').controller('MyController', MyController);
MyController.$inject = ['MyService', '$scope'];
function MyController(Myservice, $scope) {
  MyService.setSomeVariable("B"); // prints "B"
});

angular.module('myApp').controller('MyOtherController', MyOtherController);
MyOtherController.$inject = ['MyService', '$scope'];
function MyController(Myservice, $scope) {
  MyService.setSomeVariable("C");  //prints "C"
});

The service is a singleton, which means it is only instantiated once for the lifetime of you application.

In AngularJS, how do you create a function in one controller to change a variable in another controller?

1 Answers1