组织一个 AngularJS 控制器
Organizing a AngularJS Controller
我是AngularJS世界的新手,来自Backbone背景。 到目前为止,我喜欢它,但两者在架构实践方面存在很大差异(有人应该写一篇关于这个哈哈的文章)。
我开始构建一些相当大的控制器,但感觉不对。 例如,这是一个基本控件,用于执行搜索和填充 ng-grid 控件以及无限滚动此网格。
var ctrl = ['$scope', 'model', '$modal', function ($scope, model, $modal) {
$scope.page = 0;
$scope.loading = true;
$scope.mySelections = [];
$scope.rows = [];
$scope.columnDefs = [{
field: 'Checked',
width: "50",
sortable: false,
headerCellTemplate: '<input class="ngSelectionHeader" type="checkbox" ng-show="multiSelect" ng-model="allSelected" ng-change="toggleSelectAll(allSelected)"/>',
cellTemplate: '<div class="ngSelectionCell"><input tabindex="-1" class="ngSelectionCheckbox" type="checkbox" ng-checked="row.selected" /></div>'
}];
$scope.gridOptions = {
data: 'rows',
columnDefs: "columnDefs",
enableColumnResize: true,
selectedItems: $scope.mySelections,
};
/**
* Pages the grid and returns a $.deferred
*/
var pageGrid = function () {
return model.ExecuteSearchForReport("4146", ++$scope.page)
.done(function (records) {
$.each(records, function (i, record) {
var fields = {};
$.each(record.Value, function (ii, field) {
var fieldKey = field.Key.replace(/'s/g, '');
fields[fieldKey] = field.Value;
});
$scope.rows.push(fields)
});
$scope.$digest();
});
};
/**
* Page the grid initally.
*/
pageGrid().done(function (records) {
createColumns(records);
$scope.loading = false;
// if the grid height
var gridHeight = $('.ngGrid').height();
var repage = function () {
if ($('.ngCanvas').height() < gridHeight) {
pageGrid().done(function () {
repage();
});
}
};
repage();
$scope.$digest();
});
/**
* Creates the columns for the grid based on the records.
*/
var createColumns = function (records) {
if (records.length) {
$.each(records[0].Value, function (ii, field) {
var fieldKey = field.Key.replace(/'s/g, '');
var col = {
field: fieldKey,
displayName: field.Key,
resizable: true
};
// all the other columns are small
if (fieldKey !== "FileName") {
col.width = "100";
}
$scope.columnDefs.push(col);
});
}
};
/**
* List for `ngGridEventScroll` event to page the data set.
*/
$scope.$on('ngGridEventScroll', function () {
pageGrid();
});
/**
* Move the secure button was clicked, load next screen.
*/
$scope.moveToSecure = function () {
$scope.loading = true;
model.GetSecureDetails().done(function (data) {
$scope.loading = false;
var modalInstance = $modal.open({
templateUrl: 'Views/Modal.html',
controller: ModalInstanceCtrl,
resolve: {
data: function(){
return {
header: "Move To Secure",
body: "Views/Move.html",
lists: data
};
}
}
});
modalInstance.result.then(function (formData) {
var defs = [];
$.each($scope.mySelections, function (i, sel) {
defs.push(model.MoveToSecure({
Id: sel.EventID.substring(4, sel.EventID.length),
Filename: sel.FileName
}));
});
$.when.apply($, defs).done(function () {
alert('Move completed');
});
});
});
};
}];
我知道,这很多,而且在所有变量初始化、私有方法和通用初始化方法之间,对我来说感觉有点非结构化。 对我来说,它并不简洁和确定性,这是我喜欢Backbone的地方。 有人对更好的方法有任何反馈吗? 谢谢!
您需要将
大部分内容移动到"简洁"的指令中。如果你不掌握指令,你的控制器总是会像这样负担过重和疯狂。理想情况下,您的控制器几乎只在您的范围和服务之间来回传输数据。
相关文章:
- 如何编写一个 angularJs 控制器来从 Parse.com 获取 REST 数据
- 从一个视图到另一个 AngularJS 的对象
- 你如何嘲笑一个 angularjs $resource工厂
- 选择多个项目,而不仅仅是一个(angularJs)
- 组织一个 AngularJS 控制器
- 在另一个 angularjs 应用程序中嵌入 angularjs 应用程序
- 在另一个 AngularJS 之后执行函数
- 发现了一个 Angularjs ng-show ng-if 的错误
- 从一个 Angularjs 应用程序中从另一个应用程序调用函数
- 在另一个 AngularJS Ionic 中调用一个工厂
- 创建一个Angularjs web表单,该表单重复但没有't克隆
- 确保一个AngularJS控制器先于另一个加载
- 是否可以将一个值/ng模型从一个指令模板发送到另一个?(AngularJS)
- 如何在一个AngularJS指令中转换jQuery函数
- 如何判断一个Angularjs页面是通过刷新加载的还是通过链接导航的
- 如何在一个节点包中创建一个AngularJs指令,然后将它包含在应用的另一个节点包中
- 我应该如何构建一个angularjs页面与直接链接,影响页面内容
- 我怎么把它变成一个AngularJs指令呢?
- 停止一个AngularJS承诺链
- 用一个angularjs对象填充一个现有的表单