Angularjs版本1.4.4
Angularjs验证记录(1.4.4)
1.使用JS给表单赋值不能验证通过
在使用Angularjs做验证的时候使用jquery或者其他方式直接给input赋值不能通过Angularjs的验证,
是因为需要将值付给ng-model对象中的值
如下:将jquery的赋值方式改为给scope中的实体直接赋值才能通过验证
$("#logoPath").val(data.result.path);
scope.logoPath=data.result.path;
2.使用requirejs(2.1.9)与Angularjs(1.4.4)整合加载顺序导致找不到Angularjs控制器问题
报错如下Error: [ng:areq] Argument 'brandController' is not a function, got undefined
分析原因如下:
使用bootstrap将应用加载到页面(angular.bootstrap(document, ['pwyecEP']);)时候会先于Controller模块的js先执行导致页面中的标签不能被找到
解决办法:1.将控制器依赖关系写入bootstrap文件中,坏处是多人开发的时候会没人都编写这个文件
define([
'App',
'directive/BootstrapSwitch',
'directive/Uploader',
'brand/Ctrl'
], function(angular){
angular.element(document).ready(function(){
angular.bootstrap(document, ['pwyecEP']);
});
});
解决办法:2.将代码写成一个返回方法,在调用控制器以后再调用方法
define([
'App',
'directive/BootstrapSwitch',
'directive/Uploader',
'brand/Ctrl'
], function(angular){
return {
run:function(){
angular.element(document).ready(function(){
angular.bootstrap(document, ['pwyecEP']);
});
}
}
});
调用代码:
require(['brand/Ctrl','bootstrap'],function(ctrl,bootstrap){ bootstrap.run(); });
3.集成EasyUI(1.4.3)渲染问题
直接在页面上门通过HTML来渲染EasyUI不可行
要通过JS的方式来渲染 在控制器中添加加载方法
$scope.initGrid=function(){
var columns=[[]];//列信息
var toolbar=[[]]工具条
function layout(){
$('#mainLayout').layout();//加载视图
var grid=null;
var options={
queryParams:generateSerachPrams(),
frozenColumns:[[
{field:'ck',checkbox:true}
]],
columns:columns,
toolbar:toolbar
}
grid=$('#dataList').datagrid(gridHelper.createConfig(options,$scope));
}
$timeout(layout,0,false);//加载表格到页面(不使用$timeout服务加载会报错)
}
4.让EasyUI(1.4.3)的行代码可以实现指令
看了下easyUI的代码和API 采用重写 $.fn.datagrid.defaults.view.render方法来实现执行指令
调用$compile服务编译render方法生成出的html代码 让代码可以执行指令
function createConfig(options,scope) {
//重写视图面板让表格支持angular指令
var appview = $.extend({}, $.fn.datagrid.defaults.view, {
render : function(target, container, frozen) {
var _927 = $.data(target, "datagrid");
var opts = _927.options;
if (opts.groupField) {
var g = this.groupRows(target, _927.data.rows);
this.groups = g.groups;
_927.data.rows = g.rows;
var _928 = [];
for (var i = 0; i < g.groups.length; i++) {
_928.push(this.renderGroup.call(this, target, i,
g.groups[i], frozen));
}
var el = $compile(_928.join(""))(scope);//创建Dom元素
$(container).html(el);
} else {
var el = $compile(this.renderTable(target, 0,_927.data.rows, frozen))(scope);//创建Dom元素
$(container).html(el);
}
}
});
var defaultOptions={
fit:true,
height:"auto",
pageList:[10,20,50],
singleSelect:true,
checkOnSelect:false,
selectOnCheck:false,
autoRowHeight:false,
pageSize:20,
pageNumber:1,
nowrap: false,
striped: true,
collapsible:true,
rownumbers:true,
fitColumns:true,
view:appview,
url:'querypage.json',
remoteSort: false,
loadFilter:function(data){
var total=0;
var data1=[];
if(data.success){
total=data.result.total;
data1=data.result.content;
}
return {
"total":total,
"rows":data1
};
},
onBeforeLoad:function(param){
var grid=$(this);
var options = grid.datagrid('getPager').data("pagination").options;
var pageNumber = options.pageNumber;
var pageSize = options.pageSize;
param.pageNumber=pageNumber;
param.pageSize=pageSize;
$log.log('param: ', param);
},
idField:null,
pagination:true//翻页工具栏
}
defaultOptions=app.extend(defaultOptions,options);
return defaultOptions;
};