Связь между контроллерами - angularjs

Question

Это простое приложение с 1 изображением, 1 видом, 2 контроллерами и 1 фабрикой.

На странице есть два выпадающего списка, где пользователь может выбрать отчет и набор. При выборе любой из них будет отображаться связанная таблица внутри ng-include. Report1 & Report2 различны в данных & в структуре таблицы. Итак, у меня есть другой html для каждого отчета.

При загрузке страницы по умолчанию выбран отчет Report 1 и Set Set 1. Данные загружаются штрафом. Текст «один» также отображается в консоли. Но, когда я выбираю Set 2, ничего не происходит.

Это потому, что Report1.html уже загружен? Я думаю, что мне нужно использовать общий сервис, но не знаю, как его использовать в этом случае.

index.html:

<div ng-controller="indexCtrl"> 
<select id="ddlReports" ng-model="ReportId"> 
    <option value="1">Report 1</option>  
</select> 
<select id="ddlSets" ng-model="SetId" ng-change="ShowReport()"> 
    <option value="1">Set 1</option> 
    <option value="2">Set 2</option> 
</select> 
<br/> 
<ng-include src="ReportTemplate"></ng-include> 
</div> 

indexCtrl.js:

$scope.ShowReport = function() { 
    GlobalVariable.SetId = $scope.SetId; 
    switch ($scope.ReportId) { 
     case 1:     
      $scope.ReportTemplate = "Report1.html";    
      break;    
    } 
}; 

Report1.html:

<div ng-controller="Report1Ctrl"> 
<table> 
    <thead> 
      <tr> 
       <th>#</th> 
       <th>Mobile No.</th> 
       <th>Circle</th>     
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="response in Report1 track by $index"> 
       <td>{{$index + 1}}</td> 
       <td>{{response.MobileNo}}</td> 
       <td>{{response.Circle}}</td>     
      </tr> 
     </tbody> 
</table> 
</div> 

Report1Ctrl.js:

//setId is a global variable 
console.log("one"); 
    var promise = ReportsFactory.GetReport(GlobalVariable.SetId); 
    promise.then(function (success) { 
     if (success.data != null && success.data != '') { 
      $scope.Report1 = JSON.parse(success.data); 
     } 
     else { 
      console.log(success.data); 
     } 
    }, 
    function (error) { 
     console.log(error); 
    }) 

Из того, что я понимаю, нг-включают в себя не регенерируется и или Report1Ctrl.js вызывается снова. Что нужно сделать, чтобы исправить это.

Answer 1

Вы можете попробовать это?

$ scope.ReportTemplate = "'Report1.html'";

Answer 2

Вместо ng-include вы должны использовать настраиваемую угловую директиву и визуализацию в соответствии с вашим выбором.

main.html

{{main.awesomeThings}} 
<custom-demo-directive></custom-demo-directive> 

main.js

angular.module('demoAppApp') 
    .controller('MainCtrl', function() { 
    this.awesomeThings = [ 
     'HTML5 Boilerplate', 
     'AngularJS', 
     'Karma' 
    ]; 
    }); 

directive.js

(function() { 
    'use strict'; 
    angular 
     .module('demoAppApp') 
     .directive('customDemoDirective', customDemoDirective); 

    customDemoDirective.$inject = ['$rootScope']; 

    /* @ngInject */ 
    function customDemoDirective ($rootScope) { 
     // Usage: 
     // 
     // Creates: 
     // 
     var directive = { 
      bindToController: true, 
      controller: directiveController, 
      controllerAs: 'vm', 
      link: link, 
      templateUrl: '/views/directive-template.html', 
      restrict: 'E', 
     }; 
     return directive; 

     function link(scope, element, attrs) { 
      console.log("link"); 
     } 
    } 

    /* @ngInject */ 
    function directiveController ($scope) { 
     $scope.main.awesomeThings.push("Directive Object"); 
     console.log($scope.main.awesomeThings); 
    } 
})(); 

Answer 3

Вы должны испускают событие на $rootScope и прослушивающие это событие в вашей Report1Ctrl (взгляните на $emit и $on в docum : https://docs.angularjs.org/api/ng/type/$rootScope.Scope).

Когда вы получаете событие, вы должны просто обновить свой дисплей. События - один из способов взаимодействия между контроллерами.