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学习总结 AngularJS是一款功能强大且流行的前端JavaScript框架,用于构建复杂的Web应用程序。通过学习AngularJS,可以快速熟悉前端编程,实现快速开发高质量的Web应用程序。 一、引入AngularJS 要使用...
AngularJS学习总结&详细介绍 AngularJS是一款流行的前端JavaScript框架,用于构建单页应用程序(Single Page Application,简称SPA)。下面是AngularJS学习经验总结,全中文说明: 什么是AngularJS? AngularJS...
熟悉问题领域 技术栈 持久化存储 MongoLab 服务器端环境 第三方JavaScript库 BootstrapCSS 2.2 构建系统 构建系统准则 自动化所有事情 尽早报错,清晰报错 不同的工作流,不同的...
以下总结了AngularJS开发者最常犯的十个错误,帮助大家避免这些陷阱,提升开发效率。 1. MVC目录结构不清晰: 开发者通常按照文件类型(如模板、控制器、指令、服务和过滤器)来组织代码,但这可能导致随着项目...
AngularJS是一款由Google维护的开源JavaScript框架,旨在通过HTML扩展来解决单页面应用(SPA, Single Page Application)开发中的常见问题。它允许开发者以声明式的方式编写代码,使得前端应用程序更加模块化、可...
总结来说,"angularjs 管理系统框架"是一个集成了 AngularJS 和 Bootstrap 的强大工具,结合自主开发的插件,为后台管理界面开发提供了全面的解决方案。无论是数据管理、用户交互还是视觉设计,都考虑到了实际业务...
总结,AngularJS 1.2.19和1.3.0-beta4分别代表了AngularJS在不同阶段的稳定性和创新。对于开发者而言,选择哪个版本取决于项目需求,如浏览器兼容性、性能要求以及是否需要最新特性。无论选择哪个版本,AngularJS都...
### AngularJS1.x快速入门知识点总结 #### 一、AngularJS概述 - **定义**:AngularJS是一款由Google维护的开源JavaScript框架,主要用于构建动态Web应用程序。它采用MVC(Model-View-Controller)设计模式,并实现...
本资料包是针对AngularJS的学习资源汇总,涵盖了从入门到高级进阶的全方位知识。 一、AngularJS核心概念 AngularJS的核心概念包括: 1. 数据绑定:这是AngularJS最显著的特性之一,它实现了视图和模型之间的双向...
- **社区论坛**:Stack Overflow等社区论坛是获取技术支持的好地方,可以解决具体的技术问题。 ### 总结 AngularJS是一个强大的前端开发框架,它极大地简化了Web应用程序的开发过程。通过学习本书,读者将能够掌握...
总结来说,AngularJS作为一个强大的前端框架,通过其丰富的特性和工具,为Web开发者提供了构建复杂交互应用的强大能力。从数据绑定到模块化,再到服务和路由,AngularJS的每一部分都旨在简化开发流程,提高开发效率...
总结一下,AngularJS中的下拉树控件需要结合自定义指令、数据模型、模板渲染和控制器逻辑来实现。通过熟练掌握这些概念,你可以为你的应用程序创造出高效且用户友好的下拉树组件,提供层次分明的选项供用户选择。
### 总结 AngularJS是一种功能强大的JavaScript框架,特别适合用于构建复杂的CRUD应用。通过其独特的数据绑定和依赖注入机制,以及丰富的模板语法和表单验证功能,AngularJS极大地简化了Web应用的开发流程。然而,...
总结一下,AngularJS路由是构建SPA的关键部分,它使得应用可以根据URL结构动态地展示不同的内容。通过`ngRoute`模块,我们可以配置路由、指定模板和控制器,以及在应用中使用`$location`服务进行导航。这个简单的...
**总结** AngularJS和Bootstrap的结合,使得开发高质量、响应式的Web应用变得更加简单。ng-control-master作为这样一个集合,提供了丰富的Web控件,有助于开发者高效地构建AngularJS应用,同时保持与Bootstrap设计...
根据所提供的文件内容,我们可以总结出以下关于Ionic项目以及AngularJS的知识点: ### Ionic项目简介 Ionic是一个开源的前端框架,用于开发跨平台的移动应用。它主要利用Web技术(HTML5、CSS、JavaScript)以及...
- **数据绑定**:AngularJS提供了双向数据绑定的功能,这意味着用户界面上的数据与后台数据模型之间会自动保持同步,无需手动处理同步问题。 - **依赖注入**:AngularJS使用依赖注入(Dependency Injection, DI)...
总结,AngularJS封装jQuery Datepicker是将两者的优势结合,利用AngularJS的双向数据绑定和指令系统,以及jQuery Datepicker的易用性和灵活性,为开发者提供了一种高效且定制化的日期选择解决方案。通过理解这些知识...