`

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

 

分享到:
评论

相关推荐

    ANGULARJS学习总结.pdf

    AngularJS学习总结 AngularJS是一款功能强大且流行的前端JavaScript框架,用于构建复杂的Web应用程序。通过学习AngularJS,可以快速熟悉前端编程,实现快速开发高质量的Web应用程序。 一、引入AngularJS 要使用...

    AngularJS学习总结&详细介绍

    AngularJS学习总结&详细介绍 AngularJS是一款流行的前端JavaScript框架,用于构建单页应用程序(Single Page Application,简称SPA)。下面是AngularJS学习经验总结,全中文说明: 什么是AngularJS? AngularJS...

    Mastering Web Application Development with AngularJS

     熟悉问题领域  技术栈  持久化存储  MongoLab  服务器端环境  第三方JavaScript库  BootstrapCSS  2.2 构建系统  构建系统准则  自动化所有事情  尽早报错,清晰报错  不同的工作流,不同的...

    总结AngularJS开发者最常犯的十个错误

    以下总结了AngularJS开发者最常犯的十个错误,帮助大家避免这些陷阱,提升开发效率。 1. MVC目录结构不清晰: 开发者通常按照文件类型(如模板、控制器、指令、服务和过滤器)来组织代码,但这可能导致随着项目...

    Angularjs_in_action

    AngularJS是一款由Google维护的开源JavaScript框架,旨在通过HTML扩展来解决单页面应用(SPA, Single Page Application)开发中的常见问题。它允许开发者以声明式的方式编写代码,使得前端应用程序更加模块化、可...

    angularjs管理系统框架

    总结来说,"angularjs 管理系统框架"是一个集成了 AngularJS 和 Bootstrap 的强大工具,结合自主开发的插件,为后台管理界面开发提供了全面的解决方案。无论是数据管理、用户交互还是视觉设计,都考虑到了实际业务...

    AngularJS 1.2.19&1.3.0

    总结,AngularJS 1.2.19和1.3.0-beta4分别代表了AngularJS在不同阶段的稳定性和创新。对于开发者而言,选择哪个版本取决于项目需求,如浏览器兼容性、性能要求以及是否需要最新特性。无论选择哪个版本,AngularJS都...

    AngularJS1.x快速入门

    ### AngularJS1.x快速入门知识点总结 #### 一、AngularJS概述 - **定义**:AngularJS是一款由Google维护的开源JavaScript框架,主要用于构建动态Web应用程序。它采用MVC(Model-View-Controller)设计模式,并实现...

    angularJS学习资料总结

    本资料包是针对AngularJS的学习资源汇总,涵盖了从入门到高级进阶的全方位知识。 一、AngularJS核心概念 AngularJS的核心概念包括: 1. 数据绑定:这是AngularJS最显著的特性之一,它实现了视图和模型之间的双向...

    Learning AngularJS.pdf (0分下载网)

    - **社区论坛**:Stack Overflow等社区论坛是获取技术支持的好地方,可以解决具体的技术问题。 ### 总结 AngularJS是一个强大的前端开发框架,它极大地简化了Web应用程序的开发过程。通过学习本书,读者将能够掌握...

    angularJS技术

    总结来说,AngularJS作为一个强大的前端框架,通过其丰富的特性和工具,为Web开发者提供了构建复杂交互应用的强大能力。从数据绑定到模块化,再到服务和路由,AngularJS的每一部分都旨在简化开发流程,提高开发效率...

    angularjs下拉树控件

    总结一下,AngularJS中的下拉树控件需要结合自定义指令、数据模型、模板渲染和控制器逻辑来实现。通过熟练掌握这些概念,你可以为你的应用程序创造出高效且用户友好的下拉树组件,提供层次分明的选项供用户选择。

    AngularJS详细使用说明从零到高手

    ### 总结 AngularJS是一种功能强大的JavaScript框架,特别适合用于构建复杂的CRUD应用。通过其独特的数据绑定和依赖注入机制,以及丰富的模板语法和表单验证功能,AngularJS极大地简化了Web应用的开发流程。然而,...

    angularjs路由

    总结一下,AngularJS路由是构建SPA的关键部分,它使得应用可以根据URL结构动态地展示不同的内容。通过`ngRoute`模块,我们可以配置路由、指定模板和控制器,以及在应用中使用`$location`服务进行导航。这个简单的...

    angularjs和bootstrap开发的web控件的集合

    **总结** AngularJS和Bootstrap的结合,使得开发高质量、响应式的Web应用变得更加简单。ng-control-master作为这样一个集合,提供了丰富的Web控件,有助于开发者高效地构建AngularJS应用,同时保持与Bootstrap设计...

    ionic项目简介以及Angularjs 基础

    根据所提供的文件内容,我们可以总结出以下关于Ionic项目以及AngularJS的知识点: ### Ionic项目简介 Ionic是一个开源的前端框架,用于开发跨平台的移动应用。它主要利用Web技术(HTML5、CSS、JavaScript)以及...

    AngularJS详细使用说明从零到高

    - **数据绑定**:AngularJS提供了双向数据绑定的功能,这意味着用户界面上的数据与后台数据模型之间会自动保持同步,无需手动处理同步问题。 - **依赖注入**:AngularJS使用依赖注入(Dependency Injection, DI)...

    AngularJS封装jQuery Datepicker

    总结,AngularJS封装jQuery Datepicker是将两者的优势结合,利用AngularJS的双向数据绑定和指令系统,以及jQuery Datepicker的易用性和灵活性,为开发者提供了一种高效且定制化的日期选择解决方案。通过理解这些知识...

Global site tag (gtag.js) - Google Analytics