在指令中使用控制器
Using controller in a directive
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>
解决方案编号。 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" />
希望对您有所帮助
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>
解决方案编号。 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" />
希望对您有所帮助