Defining angular controllers and component

Question

I'm trying to call a function from within one angular component's controller to another component's controller. I found this answer, but the controllers are defined differently than what is shown in the tutorials I followed, so I'm confused as to how I'm supposed to reference the components and templates.

Here is how I currently define one of my controllers based on the official angular tutorial

angular.
  module('moduleName').
  component('firstComponent', {
    templateUrl: 'url/to/template',
    controller: function FirstController($scope) {  
       //I want to call a function in SecondController here
    }
  });

//in another component file
angular.
  module('moduleName').
  component('secondComponent', {
    templateUrl: 'url/to/template',
    controller: function SecondController($scope) {  
       //function here which will be called
    }
  });

Say I re-structure them like in the example I linked above...

var app= angular.module("myApp",[]);

app.controller('One', ['$scope', '$rootScope'
    function($scope) {
        $rootScope.$on("CallParentMethod", function(){
           $scope.parentmethod();
        });

        $scope.parentmethod = function() {
            // task
        }
    }
]);

//in another file 
var app= angular.module("myApp",[]);
app.controller('two', ['$scope', '$rootScope'
    function($scope) {
        $scope.childmethod = function() {
            $rootScope.$emit("CallParentMethod", {});
        }
    }
]);

How am I supposed to reference each controller's component which they belong to, and their respective templates? I tried to write them like in the example I linked above, but nothing happened. I didn't get any errors, but literally nothing happened. Nothing was displayed on the page. It tried to write to the console, but nothing appeared.

There's really no HTML at this point. I added an alert function to test, along with console logging. When I used a console log (prior to the "restructure") the message showed. After trying to restructure, nothing happened. I'm just trying to get the controllers to "talk" to each other...or by themselves for that matter — user1852176, Aug 23 '16 at 02:05

score 1 · Accepted Answer · answered Aug 23 '16 at 04:29

Your second block of code has the right concept, but both controllers need to be instantiated for it to work.

Here's a working JSFiddle. https://jsfiddle.net/reid_horton/rctx6o1g/

When you click the button, the text Hello from callerComponent! appears below it.

HTML

<div ng-app="myApp">
  <caller-component></caller-component>
  <callee-component><</callee-component>
</div>

JS

var app = angular.module("myApp", []);

app.component("callerComponent", {
    template: "<button ng-click='externalCall()'>Click Me!</button>",
    controller: function ($scope, $rootScope) {
        $scope.externalCall = function () {
            $rootScope.$emit("setText");
        }
    }
});

app.component("calleeComponent", {
    template: "<p>{{ myText }}</p>",
    controller: function ($scope, $rootScope) {
        $rootScope.$on("setText", function () {
            $scope.myText = "Hello from callerComponent!"
        });
    }
});

Thanks, this worked. The only thing I'm a bit confused on is the controller naming. Since it wasn't explicitly declared, does Angular just assume the controller's name is the same as its component? — user1852176, Aug 23 '16 at 05:16
The controller function itself is anonymous and so it has no name. If you need to access the controller from the component's template, you can use the `controllerAs` attribute. More about that here – https://docs.angularjs.org/api/ng/service/$compile#-controlleras- — Reid Horton, Aug 24 '16 at 01:13

Defining angular controllers and component

1 Answers1