Angular 1.6/MVC 4.6/UI-Gridで$ injector：unprエラーを修正する方法

Question

私はAngular 1.6/MVC 4.6/E.F 6.0のWebアプリケーションで作業しています。私もUI-Gridを追加しました。うまくいきます。 this part of documentationのようなカスタムフィルタを作成しようとしています。私の目的は、「年齢」と同じカスタムフィルタを作成することです。ローカルで動作していますが、Webアプリケーションを公開しているわけではありません。私はこの2つのエラーがあります：

Possibly unhandled rejection: canceled 
Error: [$injector:unpr] http://errors.angularjs.org/1.6.2/$injector/unpr?p0=nProvider%20%3C-%20n%20%3C-%20myCustomModalCtrl 

私はこのカスタムフィルターのために追加したコントローラー/ディレクティブに関係していると確信しています。私はAngular JS help pageをreadedているが、私はこのエラーを修正することができるか分からないが、この場合に役立ちますなぜそれがJS

var PrintersApp = angular.module('PrintersApp', ['ui.grid', 'ui.grid.pagination', 'ui.grid.selection', 'ui.grid.exporter', 'ui.grid.moveColumns', 'ui.grid.autoResize']); 

var Now = new Date(); 

PrintersApp.controller('PrintersController', ['$scope', '$http', '$filter', 'uiGridConstants', 
    function ($scope, $http, $filter, uiGridConstants) { 
     var store = $scope; 
     $scope.highlightFilteredHeader = function (row, rowRenderIndex, col, colRenderIndex) { 
      if (col.filters[0].term) { 
       return 'header-filtered'; 
      } else { 
       return ''; 
      } 
     }; 
     var ExportDate = $filter('date')(Now, "MM-dd-yyyy"); 
     $scope.gridOptions = { 
      enableFiltering: true, 
      paginationPageSizes: [25, 50, 75], 
      paginationPageSize: 25, 
      enableGridMenu: true, 
      enableSelectAll: false, 
      exporterMenuPdf: false, 
      exporterCsvFilename: ExportDate + '-PrintersDataExport.csv', 
      exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location")), 
      onRegisterApi: function (gridApi) { 
       $scope.gridApi = gridApi; 
      }, 
      onRegisterApi: function (gridApi) { 
       $scope.gridApi = gridApi; 
      }, 
      columnDefs: [ 
       { field: 'Date', enableFiltering: false, enableColumnMenu: false, enableSorting: false, width: 160 }, 
       { field: 'User', headerCellClass: $scope.highlightFilteredHeader, enableHiding: false, width: 160 }, 
       { field: 'Pc', headerCellClass: $scope.highlightFilteredHeader, enableHiding: false, width: 120 }, 
       { field: 'PrinterSrv', enableFiltering: $scope.highlightFilteredHeader, enableHiding: false, }, 
       { 
        field: 'PrinterName', 
        filterHeaderTemplate: '<div class="ui-grid-filter-container" ng-repeat="colFilter in col.filters"><div my-custom-modal></div></div>', 
        width: 320, 
       }, 
       { 
        field: 'Default', filter: { 
         type: uiGridConstants.filter.SELECT, 
         selectOptions: [{ value: 'true', label: 'true' }, { value: 'false', label: 'false' }, ] 
        }, 
        headerCellClass: $scope.highlightFilteredHeader, enableColumnMenu: false, enableSorting: false, width: 150 
       }, 
      ] 
     }; 

     $http.get('/AuditPrinters/GetAuditPrintersData') 
     .then(function (response) { 
      var datatest = response.data; 
      datatest.forEach(function addDates(row, index) { 
       TimeStamp = (row.Date).replace('/Date(', '').replace(')/', '') 
       row.Date = $filter('date')(TimeStamp, "MM/dd/yyyy HH:mm:ss"); 
      }); 
      $scope.gridOptions.data = datatest; 
     }, function (err) { 
      alert("Erreur" + rr); 
     }); 
     $scope.toggleFiltering = function() { 
      $scope.gridOptions.enableFiltering = !$scope.gridOptions.enableFiltering; 
      $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN); 
     }; 
    }]) 

PrintersApp.directive('myCustomDropdown', function() { 
    return { 
    template: '<select class="form-control" ng-model="colFilter.term" ng-options="option.id as option.value for option in colFilter.options"></select>' 
    }; 
}) 

PrintersApp.controller('myCustomModalCtrl', function ($scope, $compile, $timeout) { 
    var $elm; 
    $scope.showPrintersNameModal = function() { 
    $scope.listOfPrinters = []; 

    $scope.col.grid.appScope.gridOptions.data.forEach(function (row) { 
     if ($scope.listOfPrinters.indexOf(row.PrinterName) === -1) { 
      $scope.listOfPrinters.push(row.PrinterName); 
     } 
    }); 
    $scope.listOfPrinters.sort(); 
    $scope.gridOptions = { 
     data: [], 
     enableColumnMenus: false, 
     onRegisterApi: function(gridApi) { 
     $scope.gridApi = gridApi; 

     if ($scope.colFilter && $scope.colFilter.listTerm){ 
      $timeout(function() { 
       $scope.colFilter.listTerm.forEach(function (PrinterName) { 
       var entities = $scope.gridOptions.data.filter(function(row) { 
        return row.PrinterName === PrinterName; 
       }); 

       if(entities.length > 0) { 
       $scope.gridApi.selection.selectRow(entities[0]); 
       } 
      }); 
      }); 
     } 
     } 
    }; 

    $scope.listOfPrinters.forEach(function (PrinterName) { 
     $scope.gridOptions.data.push({ PrinterName: PrinterName }); 
    }); 
    var html = '<div class="modal" ng-style="{display: \'block\'}"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">Filter Ages</div><div class="modal-body"><div id="grid1" ui-grid="gridOptions" ui-grid-selection class="modalGrid"></div></div><div class="modal-footer"><button id="buttonClose" class="btn btn-primary" ng-click="close()">Filter</button></div></div></div></div>'; 
    $elm = angular.element(html); 
    angular.element(document.body).prepend($elm); 
    $compile($elm)($scope); 
    }; 

    $scope.close = function() { 
    var printersname = $scope.gridApi.selection.getSelectedRows(); 
    $scope.colFilter.listTerm = []; 
    printersname.forEach(function (PrinterName) { 
     $scope.colFilter.listTerm.push(PrinterName.PrinterName); 
    }); 

    $scope.colFilter.term = $scope.colFilter.listTerm.join(', '); 
    $scope.colFilter.condition = new RegExp($scope.colFilter.listTerm.join('|')); 

    if ($elm) { 
     $elm.remove(); 
    } 
    }; 
}) 

PrintersApp.directive('myCustomModal', function() { 
    return { 
     template: '<label>{{colFilter.term}}</label><button ng-click="showPrintersNameModal()">...</button>', 
    controller: 'myCustomModalCtrl', 
    }; 
}); 

Answer 1

わからないとlocalY

だけ働いているが、あなたの問題はと関連するかもしれませんmyCustomModalCtrlコントローラの宣言他のものと比較してこの宣言は、注入されたサービスのための完全修飾宣言が欠落しています。

PrintersApp.controller('myCustomModalCtrl', function ($scope, $compile, $timeout) { [..] }); 

は次のようになります。あなたのコードが縮小された場合

PrintersApp.controller('myCustomModalCtrl', ['$scope', '$compile', 
'$timeout', function ($scope, $compile, $timeout) { [..] }]); 

、パラメータ$scopeが名前に変更され、たとえば、aとなります。 $injectorに宣言されたaというサービスがないため、受信したエラーが発生します。

この問題を回避するには、コントローラーで要求する各パラメーターに注入する正しいサービス名を$injectorに伝える必要があります。

詳細についてはthis articleをご覧ください。