在指令中使用控制器

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" /> 

希望帮助