The moduleController controller subscribes to languageChanged, but nothing happens during broadcast. I ask for your help.

<!DOCTYPE html> <html lang="en" ng-app="translate"> <head> <meta charset="UTF-8"> <title>Title</title> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script> <script src = "testAngular.js"></script> </head> <body> <select ng-model="selectedLanguage" ng-controller="translateController" ng-change = "changeLanguage()"> <option ng-repeat="language in languages" value="{{language.value}}">{{language.text}}</option> </select> <div ng-model="text" ng-controller="moduleController" > {{text}} </div> </body> </html>

testAngular.js

 var translateModel = { currentLanguage:"eng", languages:[ {value:"eng", text:"english"}, {value:"rus", text:"russian"} ] }; var moduleData = { text:"", }; var translate = angular.module("translate", []); translate.controller("translateController", function ($scope){ $scope.languages = translateModel.languages; $scope.currentLanguage = translateModel.currentLanguage; $scope.changeLanguage = function (){ $scope.currentLanguage = $scope.selectedLanguage; alert("language "+$scope.currentLanguage +" was selected"); $scope.$broadcast("languageChanged", $scope.currentLanguage ); }; }); translate.controller("moduleController", function ($scope){ $scope.text = moduleData.text; $scope.$on("languageChanged", function (event,currentLanguage){ alert("requaire "+ currentLanguage + " text"); if(currentLanguage == "rus"){ $scope.text = "Текст на русском"; }; if(currentLanguage == "eng"){ $scope.text = "Text on english"; }; }); });

    1 answer 1

    Osprey data controllers are on the same level, so just one call emit or broadcast not enough, since the first - sends up through the levels, and the second - down.

    You can solve in several ways:

    1. Send from rootScope
    2. put one of the controllers inside the other
    3. use for communication not events, but service

    a small digression: it makes no sense to write ng-model on a simple diva