Angularjs问题总结

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;
		};