在我们的一个项目中，我们试图围绕ngTable库编写一个包装器！ 在这个组件的控制器中，我们使用ocLazyLoad加载ngTable。 以下是我们写的内容：
数据网格组件
(function() {
'use strict';
angular
.module('CommonApplication')
.component('datagrid', {
scope: true,
bindings: {
basepath: '@',
title: '@',
dataset: '<'
},
templateUrl: '/frontend/components/global/datagrid/templates/datagrid.html',
controller: 'DataGridController',
});
})();
带$ocLazyLoad的数据网格控制器(不起作用：~| )
(function() {
'use strict';
angular
.module('CommonApplication')
.controller('DataGridController',
[ '$scope', '$injector', '$ocLazyLoad', DataGridController ]);
function DataGridController($scope, $injector, $ocLazyLoad) {
var vm = this;
var components = {
datagrid: [
'https://unpkg.com/ng-table@2.2.0/bundles/ng-table.min.css',
'https://unpkg.com/ng-table@2.2.0/bundles/ng-table.min.js'
]
};
$ocLazyLoad.load(components.datagrid).then(function() {
var NgTableParams = $injector.get('NgTableParams');
vm.data = [{name: "Moroni", age: 50},{name: "Moroni", age: 50},{name: "Moroni", age: 50},{name: "Moroni", age: 50}];
vm.tableParams = new NgTableParams({
page: 1,
count: 10
}, {
dataset: vm.data
});
});
}
})();
不带$ocLazyLoad的数据网格控制器(工作原理)
(function() {
'use strict';
angular
.module('CommonApplication')
.controller('DataGridController',
[ '$scope', '$injector', '$ocLazyLoad', DataGridController ]);
function DataGridController($scope, $injector, $ocLazyLoad) {
var vm = this;
var components = {
datagrid: [
'https://unpkg.com/ng-table@2.2.0/bundles/ng-table.min.css',
'https://unpkg.com/ng-table@2.2.0/bundles/ng-table.min.js'
]
};
var NgTableParams = $injector.get('NgTableParams');
vm.data = [{name: "Moroni", age: 50},{name: "Moroni", age: 50},{name: "Moroni", age: 50},{name: "Moroni", age: 50}];
vm.tableParams = new NgTableParams({
page: 1,
count: 10
}, {
dataset: vm.data
});
}
})();
使用 ocLazyLoad，如果我在我们正在定义的行上设置断点vm.tableParams当它被填充时new NgTableParams它的设置和其他属性在其arguments属性中都有这个特定的错误。
这是指向函数回调结束$ocLazyLoad.then异常错误！这很datagrid.js:47:7，因为我们将这些 js 文件和另一个文件连接成datagrid.js：
TypeError: 'caller' and 'arguments' are restricted function properties and cannot be accessed in this context.
at Function.remoteFunction (<anonymous>:3:14)
at http://localhost:8081/frontend/components/global/datagrid/datagrid.js:47:7
at http://localhost:8081/frontend/javascripts/head.min.js:136:20
at m.$eval (http://localhost:8081/frontend/javascripts/head.min.js:150:347)
at m.$digest (http://localhost:8081/frontend/javascripts/head.min.js:147:420)
at http://localhost:8081/frontend/javascripts/head.min.js:150:434
at e (http://localhost:8081/frontend/javascripts/head.min.js:50:444)
at http://localhost:8081/frontend/javascripts/head.min.js:53:300
对此有什么想法吗？！
显然，即使使用它的承诺.then(callback)延迟加载也不会让 Angular 等待它的完成！
我所做的是在加载ng-table完成时使用ngTableParams初始化一个表！考虑到这一点，我决定使用一个简单的技巧！
我将ngTableParams附加到一个名为vm.tableParams的Scope变量中，稍后我将使用它来初始化视图中的表，当使用ng-table的指令时。因此，即使在调用尚未加载的指令之前，我们也使用ng-if和tableParams检查延迟加载是否已完成：
查看：数据网格.pug
// Load Directive if Params in the controller were attached to the scope!
.row.expanded(ng-if="table.tableParams")
.small-12.columns
table.data-table.hover.stacktable.table-condensed.table-bordered.table-striped(ng-table-dynamic="table.tableParams with table.headers",template-pagination="custom/pager", show-filter="true")
tr(ng-repeat="(rowIndex, row) in $data ")
td(ng-repeat="column in $columns", ng-switch="column.field")
input.selectSwitch( ng-switch-when="selector", type="checkbox", ng-model="table.checkboxes.items[row.id]")
div(ng-switch-when="id") {{ rowIndex + 1 }}
div(ng-switch-when="body") {{ row }}
span(ng-switch-default) {{row[column.field]}}
控制器：datagrid.controller.js
// Lazyload datagrid components and Initialize headers and parametres!
$ocLazyLoad.load(components.datagrid).then(function (){
self.headers = self.dataset.headers;
self.dataset.headers.forEach(function( header ) {
header.title = header.headerTitle;
});
var NgTableParams = $injector.get('NgTableParams');
self.tableParams = new NgTableParams({
count: 5
}, {
dataset: self.dataset.data
});
});
这样我们就不会手动使用$compile来重新渲染视图，而是让 angular 处理编译本身，而不会影响性能:)