How can I emit data from main controller to view controller in angular?

Question

I want to create an application in angular.

I have the main controller outside the view and specific controller for view.

How can I emit data from Main Controller to View's Controller (Home Controller)?

I want to execute the function in view controller after emit data from the Main Controller.

I've tried to use - $emit and $on but in my case it doesn't work.

My code for example: https://jsfiddle.net/32hb3odk/7/

Index.html

<div ng-app="myApp">

 <div class="head-part" ng-controller="MainController as main">
 <h1>Header</h1>
 <input ng-click="main.EmitData()" type="button" value="Emit data to child control" />
 <br /> <br />
 </div>

  <div class="view-part">
  <h2>View:
  </h2>
  <div ng-view></div>
</div>


<script type=text/ng-template id=home.html>   
<div>{{home.title}}</div>
</script>

</div>

Javascript:

angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {

        $routeProvider
            .when('/', {
                controller: 'HomeController',
                controllerAs: 'home',
              templateUrl: 'home.html'
            })
                        .otherwise('/');
    }]);

angular.module('myApp').controller('HomeController', ['$scope',function ($scope) {
        var vm = this;
        vm.title = 'Homepage';
    $scope.$on('EmitMain', function(){
        alert("GetDataFromMainController");
    });
    }]);

  angular.module('myApp').controller('MainController', ['$scope', function ($scope) {

        var vm = this;
        vm.EmitData = function(){
      $scope.$emit('EmitMain');
    }

    }]);

I have not much to base this on, but most of the times when people ask questions about transmitting data from one controller to the other, they should be using a service. So, explain, why do you think that you shouldn't use a service? — Pjetr, Dec 15 '15 at 14:17
@Pjetr Because I needed an indicator of action not passing the data via service. — Jenan, Dec 31 '15 at 10:04
wouldn't it make more sense, that the service handling the action would pass an indicator of action, rather than when when clicking a button? `
`. — Pjetr, Jan 07 '16 at 10:57

score 2 · Accepted Answer · answered Dec 15 '15 at 13:40

2

That's because $emit goes up the tree. Use $broadcast instead as it traverses the tree downwards.

answered Dec 15 '15 at 13:40

Adrian Neatu

1,989
2
19
34

I tried $broadcast in this sample and it doesn't work. – Jenan Dec 15 '15 at 13:42
@Jenan $scope.$broadcast instead of $scope.$emit? – Adrian Neatu Dec 15 '15 at 13:47
Hmmm is the ng-view div a child of the mainController DIV? if they are actually sibling you will have to use $rootScope.$on and $scope.$emit. If you are doing that I think that it breaks the logic of the mainController. – Adrian Neatu Dec 15 '15 at 13:49
1

Here's the updated fiddle: https://jsfiddle.net/32hb3odk/9/ Please indent your HTML properly and keep in mind that $emit and $broadcast always traverse the DOM tree from the place you are triggering them. If the elements are sibling you need a different approach like using $rootScope. – Adrian Neatu Dec 15 '15 at 13:52
OK, thank you for fix my sample. Now it works great! :) – Jenan Dec 15 '15 at 14:15

How can I emit data from main controller to view controller in angular?

1 Answers1