Question

Angular新手在这里。我正在尝试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

解决方案没有。 1：为什么不在router.post('/upload', function(req, res, next) { if(!req.files) { return res.status(400).send("No Files were uploaded"); } var curriculum = req.files.curriculum; console.log(curriculum); curriculum.mv('../files/' + curriculum.name, function(err) { if (err){ return res.status(500).send(err); } res.send('File uploaded!'); }); });函数中注入controller。这将返回指令的父控制器。

link

解决方案没有。 2：您已经设置crApp_WCF_Drtvs.directive("fileread", [function () { return { scope: { gridApi: '=' }, link: function ($scope, $elm, $attrs, controller) { $elm.on('change', function (changeEvent) { // console.log(controller.gridApi); }); } } }]);为什么不使用它。

scope: { gridApi: '=' }

希望有所帮助

在指令中使用控制器

1 个答案: