公司最近做的项目的前端都采用Angular框架,作为一个刚入门Angular的新手,要彻底离开jQuery去做前端界面似乎有点难,特别是对DOM的操作。网上很多教程说jQuery和Angular可以混着一起用,经过我的实践,确实是可以用。
大概的界面就是这样:
效果如下所示:
但是本人觉得,有几点不太好的地方。
1、显得代码有点混乱。
2、由于Angular具有ng-click的指令,它会屏蔽了jQuery的一些操作函数。
3、用Angular的ng-repeat生成的DOM元素,jQuery无法获取得到。(这非常不方便)
个人觉得要是对DOM进行操作,最好写一个自定义的directive。例如,做一个二级树状菜单。
html代码:
<ul class="firstMenu">
<!----把自定义指令绑定到指定元素上----->
<li two-menu>一级
<!-------子菜单消除点击冒泡事件,防止点击子菜单时子菜单隐藏了自身--------->
<ul class="secondMenu" ng-click="$event.stopPropagation()">
<li>二级</li>
<li>二级</li>
</ul>
</li>
<li two-menu>一级
<ul class="secondMenu" ng-click="$event.stopPropagation()">
<li>二级</li>
<li>二级</li>
<li>二级</li>
<li>二级</li>
</ul>
</li>
</ul>
css代码:
.secondMenu{
display:none;
}
大概的界面就是这样:
js代码,定义一个directive.
angular.module('test',[]).controller('testController',function($scope){
}).directive('twoMenu',function(){
return {
link:function(scope,element,attrs){
//绑定点击事件
element.on("click",function(event){
//消除冒泡
event.stopPropagation();
if(element.find("ul").eq(0).css("display")=="block"){//如果子级菜单显示,则隐藏
element.find("ul").eq(0).css("display","none");
}
else{
element.find("ul").eq(0).css("display","block");//如果子级菜单隐藏,则显示
}
});
}
}
});
三级的树形菜单也很简单,只需要增加几行代码即可。
<li two-menu>一级
<!-------子菜单消除点击冒泡事件,防止点击子菜单时子菜单隐藏了自身--------->
<ul class="secondMenu" ng-click="$event.stopPropagation()">
<li two-menu>二级
<ul class="thirdMenu" ng-click="$event.stopPropagation()">
<li>三级</li>
<li>三级</li>
<li>三级</li>
<li>三级</li>
</ul>
</li>
<li>二级</li>
</ul>
</li>
效果如下所示:
完整的代码如下所示:
<!DOCTYPE>
<html ng-app="test">
<head>
<script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>
<script>
angular.module('test',[]).controller('testController',function($scope){
$scope.test = "123";
}).directive('twoMenu',function(){
return {
link:function(scope,element,attrs){
//绑定点击事件
element.on("click",function(event){
//消除冒泡
event.stopPropagation();
if(element.find("ul").eq(0).css("display")=="block"){//如果子级菜单显示,则隐藏
element.find("ul").eq(0).css("display","none");
}
else{
element.find("ul").eq(0).css("display","block");//如果子级菜单隐藏,则显示
}
});
}
}
});
</script>
<style>
.secondMenu,.thirdMenu{
display:none;
}
</style>
</head>
<body ng-controller="testController">
<ul class="firstMenu">
<!----把自定义指令绑定到指定元素上----->
<li two-menu>一级
<!-------子菜单消除点击冒泡事件,防止点击子菜单时子菜单隐藏了自身--------->
<ul class="secondMenu" ng-click="$event.stopPropagation()">
<li two-menu>二级
<ul class="thirdMenu" ng-click="$event.stopPropagation()">
<li>三级</li>
<li>三级</li>
<li>三级</li>
<li>三级</li>
</ul>
</li>
<li>二级</li>
</ul>
</li>
<li two-menu>一级
<ul class="secondMenu" ng-click="$event.stopPropagation()">
<li>二级</li>
<li>二级</li>
<li>二级</li>
<li>二级</li>
</ul>
</li>
</ul>
</body>
</html>
Angular内嵌的jqLite,对于基本的操作是足够用的。如果只是部分地方使用jQuery,就没必要引入整个jQuery文件。以下是jqLite一些比较重要的方法。
下面部分是引用自:http://www.cnblogs.com/fenxiangboke/p/4973872.html
addClass() 给元素添加指定的类。
after() 在元素的后面插入内容。
append() 将内容插入到元素的尾部。
attr() 获取或者设置元素的属性①值。
bind()/on() 给选中元素的一个或者多个事件附加一个事件处理程序。
children() 获取元素的子元素。
clone() 创建一个元素的深复制。
contents() 获取每个元素的子节点,返回的集合中包含文本和注释节点。
css() 获取或设置元素的style属性值。
data() 存储或返回与元素关联的指定数据值。
eq() 获取指定索引位置的元素。
find() 过滤元素的子节点,只能通过标签名过滤。
hasClass() 确定元素本身是否分配了给定的类。
html() 获取或者设置元素的HTML内容。
next() 获取紧跟元素的兄弟元素。
off()/unbind() 通过名称移除一个事件处理程序。
parent() 获取元素的父元素。
prepend() 将内容插入到元素的开头。
prop() 获取或设置元素的属性①值。
ready() 指定一个DOM加载完成时执行的函数。
remove() 从DOM中移除元素。
removeAttr() 从元素中移除一个属性(attribute)。
removeClass() 从元素中移除一个、多个或者所有类。
removeData() 从元素中移除先前存储的数据。
repalceWith() 使用提供的新内容替换元素。
text() 获取或者设置元素中合并的文本内容。
toggleClass() 从元素中添加或者移除一个或者多个类。
triggerHandler() 执行附加给元素的某个事件的所有事件处理程序。
val() 获取或设置元素的当前值。
wrap() 使用指定的HTML结构包裹元素。