发表于: 2017-04-27 22:16:07
1 876
今天完成的事情:
1.写了任务6的后台页
2.学习了data-toggle属性
3.学习了如何用angular.element操作DOM
明天计划的事情:
1.新建一个app.js作为angular的全局配置和初始化文件,并引入该文件
2.在app.js中通过angular.module来加载模块
3.学习ng-route;
遇到的困难:
在写侧边栏的过程中踩了一些坑,比如说
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">
<i class="icon iconfont icon-dianbozhibov1213"></i>
用户管理
<i class="icon iconfont icon-cebianlanshouqi"></i>
</a>
<ul class="dropdown-menu" role="menu">
<li>用户列表</li>
</ul>
</li>
点击后第一次点击能够打开菜单栏,然而第二次点击用户列表还是点击用户管理区域,都会触发aria-expanded属性,aria-expanded="true"时,菜单栏打开,而aria-expanded="false"时,菜单栏关闭,通常都是underfined,开始试着设置aria-expanded的值为true,但结果还是差强人意,不能解决点击用户列表不收回的问题。后来与萝卜多官网仔细比对后才发现,原来是有一个属性用得不对data-toggle="dropdown";该属性指的是下拉菜单样式,也就是我们平时看到的下拉菜单,只要点击某块区域内,就会触发aria-expanded事件。
后来用了data-toggle:"collapse";该值的意思是折叠,然后使用href属性指向需要折叠的标签属性。如图所示。
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="collapse" href="#collapseSix">
<i class="icon iconfont icon-dianbozhibov1213"></i>
用户管理
<i class="icon iconfont icon-cebianlanshouqi"></i>
</a>
<ul class="dropdown-menu" role="menu" id="collapseSix">
<li>用户列表</li>
</ul>
</li>
收获:
学会用angular.element操作DOM。用angular操作DOM有3种方法
1.以原生js对象的querySelector方法获取元素id
var test = angular.element(document.querySelector(‘#test’));
test.addClass(‘testClass’);
2.或者获取id节点
var test = angular.element(document.getElementById('#test'));
test.addClass(‘testClass’);
3.对于获取数组节点(比如说获取class节点或者是tagName节点)就需要进行遍历操作
angular.forEach(angular.element(document).find('div'),function(node){
if(node.id == 'testId'){
node.addClass('testClass');
}
if(node.className == ‘testClass’){
node.removeClass(‘testClass’)
}
})
评论