在指令中使用控制器

Question

這裏是角度新手。我正在嘗試Brian's example of importing data into UI Grid from Excel。這像一個魅力。 Brian使用自定義指令。我能夠完美地讀取excel文件。在讀取指令中的excel數據後，我想用控制器中現有的UI網格表檢查excel數據列。確認所有列都存在於Excel中後，我需要將其保存在我的數據庫中。

爲此，我無法從指令中訪問gridApi。不知道我出錯的地方。任何幫助，高度讚賞！提前致謝！

下面是代碼的簡化版本，它只是在指令中記錄了GridApi /任何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

解決方案no。 1： 爲什麼不注入controller而不是link函數。這將返回指令所在的父控制器。

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: '=' }爲什麼不使用它。

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

     // console.log($scope.gridApi); 
     }); 
    } 
    } 
}]); 

// HTML 
<input type="file" 
     accept=".xls,.xlsx,.ods" 
     fileread 
     opts="vm.gridOptions" 
// give gridApi scope variable for fileread directive to get 
     grid-api="gridApi" 
     multiple="false" /> 

希望幫助