Question

这是一个简单的应用程序，包括 - 1页，1个视图，2个控制器和1个工厂。

该页面有两个下拉列表，用户可以在其中选择报告和集合。选择其中之一后，它将在ng-include内显示相关表格。报告1＆amp; Report2在数据和数据方面有所不同。在表结构中。所以，我为每个报告都有一个不同的html。

在页面加载时，默认情况下，所选报表为“报表1”，“设置”为“设置1”。数据加载正常。文本“one”也显示在控制台中。但是，当我选择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);
    })

据我所知，ng-include没有被重新生成，或者再次调用了Report1Ctrl.js。应该怎么做才能纠正这个问题。

Answer 1

你可以尝试一下吗？

$ scope.ReportTemplate =“'Report1.html'”;

Answer 2

您应该在$rootScope上发出一个事件并在Report1Ctrl中收听此事件（请在文档中查看$emit和$on：{{3 }}）。

当您收到活动时，您应该只刷新您的显示器。事件是控制器之间通信的方式之一。

Answer 3

您应该使用自定义角度指令并根据您的选择进行渲染，而不是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);
    }
})();

在控制器之间进行通信 - angularjs

3 个答案: