在指令中使用控制器

Question

Angular 这里是新手。我正在尝试 Brian's example of importing data into UI Grid from Excel。这就像一个魅力。 Brian 使用自定义指令。我能够完美地阅读 excel 文件。读取指令中的 excel 数据后，我想用控制器中现有的 UI-grid table 检查 excel 数据列。在确认 excel 中存在所有列后，我需要将其保存在我的数据库中。

为此，我无法从指令访问 gridApi。不知道我哪里错了。非常感谢任何帮助！提前致谢！

这是代码的简化版本，它只在指令中记录 GridApi / 任何范围变量（来自控制器）。

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: 为什么不在 link 函数中注入 controller 呢？这个 returns 它所在指令的父控制器。

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

希望对您有所帮助

在指令中使用控制器

Using controller in a directive

javascript

angularjs

angular-ui-grid

ui-grid