指示にコントローラを使用する

Question

角の初心者はこちら。私はBrian's example of importing data into UI Grid from Excelを試しています。これは魅力のように機能します。 Brianはカスタムディレクティブを使用します。私はExcelファイルを完全に読むことができます。指示を読み込んだ後、コントローラの既存のUIグリッドテーブルを使ってExcelのデータ列をチェックします。すべての列がExcelに存在することを確認した後、データベースに保存する必要があります。

これを行うには、ディレクティブからgridApiにアクセスできません。どこが間違っているのか分かりません。どんな助けも高く評価されます！前もって感謝します！

GridApi/any Scope変数（コントローラから）をディレクティブに記録するコードの簡略化されたバージョンです。

app.js

var crApp_WCF = angular.module('crApp_WCF', ['ngRoute', 'crApp_WCF_Ctrls', 'crServices', 'ui.grid', 'crApp_WCF_Drtvs', 'ui.grid.edit', 'ui.grid.exporter', 'ui.grid.selection']); 

controller.js

var crApp_WCF_Ctrls = angular.module('crApp_WCF_Ctrls', ['crServices', 'ui.grid.exporter']); 

crApp_WCF_Ctrls.controller('crHomeCtrl', function ($scope,$rootScope, $http, uiGridConstants, CrCRUD, uiGridExporterService, uiGridExporterConstants) { 
$scope.crGrid = { 
$scope.crGrid.onRegisterApi = function (gridApi) { 
columnDefs: [ 
    { name: 'OppName', field: 'OppName', enableFiltering: false, minWidth: 100, headerTooltip: true, enableCellEdit: false }, 
      { name: 'AcCode', field: 'AcCode', enableFiltering: false, minWidth: 60, headerTooltip: true, enableCellEdit: false }, 
      ]} 
     $scope.gridApi = gridApi; 
    }; 

directives.js

var crApp_WCF_Drtvs = angular.module('crApp_WCF_Drtvs', ['crApp_WCF_Ctrls']); 

crApp_WCF_Drtvs.directive("fileread", [function() { 
    return { 
controller: 'crHomeCtrl', 
     scope: { 
      gridApi: '=' 
     }, 
     link: function ($scope, $elm, $attrs, $rootScope) { 
      $elm.on('change', function (changeEvent) { 

        Console.log(($scope.gridApi) //displays Undefined; I want the gridApi from the controller to be displayed here. 
}); 
     } 
    } 
}]); 

Index.html

<div ng-controller="crHomeCtrl"> 
    <form class="form-inline"> 
     <button type="button" class="btn btn-success" ng-click="exportXLSX()">Export as XLSX</button> 
     <button type="button" class="btn btn-success" ng-click="showImport=true">Import from excel</button> 
     <button type="button" class="btn" ng-click="showImport=false" ng-show="showImport">Close</button> 
     <br /> 
     <br /> 

     <div ui-grid="crGrid" ui-grid-edit ui-grid-exporter ui-grid-selection class="CrGrid"> 
      <div class="grid-msg-overlay" ng-show="showImport"> 
       <div class="msg"> 
        <div class="center"> 
         <span class="muted">Select Spreadsheet File</span> 
         <br /> 
         <input type="file" accept=".xls,.xlsx,.ods" fileread opts="vm.gridOptions" multiple="false" /> 
         <br/> 
         {{msg}} 
        </div> 
       </div> 
      </div> 
     </div> 
</div> 
</form> 

Answer 1

Solution no。 1： linkの代わりにcontrollerを注入してください。これは、ディレクティブが置かれていたディレクティブの親コントローラを返します。

crApp_WCF_Drtvs.directive("fileread", [function() { 
    return { 
    scope: { 
     gridApi: '=' 
    }, 
    link: function ($scope, $elm, $attrs, controller) { 
     $elm.on('change', function (changeEvent) { 

     // console.log(controller.gridApi); 
     }); 
    } 
    } 
}]); 

ソリューション番号。 2： scope: { gridApi: '=' }は既に使用しています。