Angular 自定义表单js扩展
javascript引入
- 直接在百度编辑器中编辑HTML直接加入
<script>
脚本 - 使用url相对路径引入
<script type="text/javascript" src="/js/aaa/bbb.js"></script> |
javascript脚本方式
- 使用子controller来实现【推荐】
在某段DOM元素上添加ng-controller="testCtrl"
在该DOM元素内部、可以使用ng-click
来触发controller
中scope
上面定义的function
。
controller会存在单独作用域,在该作用域中可以自由扩展业务逻辑。
<script type="text/javascript"> |
- 传统形式的js扩展方法,适用第一次适用angular的朋友
使用传统的方式获取到$scope
或者service
然后像 scope 中注入function,或者做一些操作
如下面脚本,在页面加载时向scope
中加入test
方法,那么我们便可以在页面中使用ng-click="test()"
来触发该方法执行
$(function(){ |
请注意自己处理$digest的动作
公共服务方法注入
- 在
custForm.js
中引入xxx模块js。 - 在
formServiceModule
添加该公共模块xxxModel。 - 在controller中注入xxx模块中的的service。
如此便可以在controller中使用该service功能了
虽然做法略有侵入,但是并没有太大影响,angular依赖注入对模块化支持很好。我们不必在意对表单公共服务的入侵
表单业务校验扩展
除了内置的表单校验外,我们支持自定义的表单校验
在业务表单,或者流程表单中,提交数据之前都会尝试执行 scope.custValid
方法(vue 版本则会尝试调用混入组件的 custValid )
当使用子类controller的形式,需要将custValid
注册入scope.$parent
中
当return false
的时候,提交表单将被终止
socpe.custValid = function(){ |
表单业务数据格式
假设 一个老师Teacher 带多个班级Class,每个班级存在多个学生, 班级与老师其实是多对多关系, 我们在老师和班级中添加一条 关系表ClassRel
一个ClassRel 对应一个班级,一个班级对应多个学生Student
业务对象数据结构如下:Teacher:{
id:id,
name:name,
ClassRelList:[{ // teacher与之一对多
id:id,
relType:"临时\代课\正式",
Class{ // ClassRel与之一对一
id:xxx,
name:xxx,
....
studentList[ // Class与之 一对多
{},{}...
]
}
}]
}
表单指令
详细介绍请参考 表单插件
表单维护与日志
业务系统的表单数据是存储于数据库中form_def
表 中
表单支持 Git 备份
需要在配置文件中配置 表单备份的目录,建议使用项目代码 资源目录
当代码提交时候、将本地表单提交到 Git 服务器formDefBackupPath = D:\\git\\agile-bpm-pom\\bpm\\form\\form-core\\src\\main\\resources\\form
每次表单保存后,系统会会以分类作为目录,formKey 为文件名,保存表单到该目录
当然该文件不会对表单数据有任何影响,仅仅是为了git文件日志备份,查看更新情况