首先是html页面的编写：
<!doctype html><html ng-app="myModule">
<head>
<meta charset="utf-8">
<title>学生信息管理</title>
//需要用到的一些库，要加载的
<script src="bower_components/angular/angularjs"></script>
<script src="bower_components/ng-table/dist/ng-tablejs"></script>
<script src="bower_components/ng-table-export/ng-table-exportjs"></script>
<link rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" >
<script src="module/scripts/controllers/Formjs"></script>
</head>
<body>
<div ui-view></div>
<div ng-controller="FormController">
<h3>学生信息列表</h3>
<br>
<div>
搜索：<input type="text" ng-model="titleFilter" placeholder="输入关键字"> //加上<tr ng-repeat="student in students|filter:titleFilter">实现了表格内容的检索。
</div>
<br>
<table ng-table="tableParams" >
<tr ng-repeat="student in students|filter:titleFilter"> //遍历每一个对象
<td title="'Name'">
<span ng-if="!student$edit">{{studentName}}</span>
<div ng-if="student$edit"><input type="text" ng-model="studentName"></div>
</td>
<td title="'Id'">
<span ng-if="!student$edit">{{studentId}}</span>
<div ng-if="student$edit"><input type="text" ng-model="studentId"></div>
</td>
<td title="'Grade'">
<span ng-if="!student$edit">{{studentGrade}}</span>
<div ng-if="student$edit"><input type="text" ng-model="studentGrade"></div>
</td>
<td title="'Actions'" width="200">
<a ng-if="!student$edit" ng-click="student$edit=true">Edit</a>
<a ng-if="student$edit" ng-click="student$edit=false">Save</a>
<a ng-click="deleteStudent(obj)" ng-if="student$edit" >Delete</a>
<!-- <a ng-click="addStudent()" ng-if="student$edit" >Add</a> -->
</td>
</tr>
</table>
<div>
<input type="text" ng-model="newName" placeholder="input Name" required/>
<input type="text" ng-model="newId" placeholder="input Id" required/>
<input type="text" ng-model="newGrade" placeholder="input Grade" required/>
<input type="button" ng-click="addStudent()" value="Add" />
</div>
</div>
</body>
</html>接下来是js代码部分var myModule=angularmodule('myModule',['ngTable'])
controller('FormController',function($scope,ngTableParams,$sce){
$scopestudents=[
{Name:'小李',Id:'201401201',Grade:'计算机技术'},
{Name:'李磊',Id:'201401202',Grade:'计算机技术'},
{Name:'夏津',Id:'201401203',Grade:'计算机技术'},
{Name:'杭州',Id:'201401204',Grade:'计算机技术'}
];
$scopeaddStudent=function(){ //添加学生函数
$scopestudentspush({Name:$scopenewName,Id:$scopenewId,Grade:$scopenewGrade});
$scopenewName='';
$scopenewId='';
$scopenewGrade='';
};
$scopedeleteStudent=function(student){ //删除一行的内容
$scopestudentssplice($scopestudentsindexOf(student),1);
};
});声明自定义指令：
bind:只调用一次，指令第一次绑定到元素时，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted：被绑定元素插入父节点时调用（父节点存在即可调用，不必存在与document中）
update：被绑定的元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新
componentUpdated：被绑定元素所在模板完成一次更新周期时调用。
unbind：只调用一次，指令与元素解绑时调用。
钩子函数参数有：
el：指令所绑定的元素，可以用来直接 *** 作DOM
bindng：一个对象，包含以下属性
1）name：指令名，不包含v-前缀
2）value：指令的绑定值，例如：v-my-directive=“1+1”，value的值就是2
3）oldValue:指令绑定的前一个值，仅在update和componentUpdated钩子中可用，无论值是否改变都可用
4）expression：绑定值的表达式或变量名。例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
5）arg：传给指令的参数。例如v-my-directive：foo，arg的值是foo
6）modifiers：一个包含修饰符的对象。例如： v-my-directivefoobar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
vnode：vue编译生成的虚拟节点
oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用，组件介绍
1、打开ionic官网 >angularjs使用ng-model时为什么value值不显示
$scope对象自动封装的,只要名称一致就行了 比如:ng-model="name",$scopename就能拿到值了1 既然你使用了 ui-router，说明你的应用是 单页程序，既然是单页程序，首先要考虑动态路由是否有必要？只要根据用户角色 显示该角色可以访问的菜单即可，在每次路由切换的时候判断下是否有访问此路由的权限，没有就跳转到指定页面即可；
2 至于你说的动态加载 是想根据用户角色动态返回指定角色的路由、模板、controller js吗？一般项目把所有的js和模板都打包压缩成一个js，反而效果更好；
3 如果你非要想根据角色动态生成路由，可以在angular还没有启动的时候获取该用户角色的所有路由（也可以说菜单），然后循环菜单 通过 ui-router 动态加入即可；
4 这样只有路由是动态载入了，关于每个路由对应的js，如果你也想实现 动态载入的话，估计就需要使用类似 requirejs 的东西，比如 marcoslin/angularAMD · GitHub 或者 atian25/angular-lazyload · GitHub 或者自己写一个也可以，原理就是在 路由的 resolve 中加载对应的js
5 模板感觉就不需要动态加载了吧，因为使用ng，模板都是前端模板，如果要根据角色动态生成模板岂不是变成服务端渲染了。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）