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