<p class="container-fluid">
<p class="navbar-header animated fadeInLeft">
<a class="navbar-brand" href="#">禾粒农场</a>
</p>
<p>
<ul class="nav navbar-nav animated fadeInLeft">
<li class="active" ng-click="goHome()" tt>
<a href="">首页</a></li>
<li class="" tt>
<a href="" ui-sref="。news">新闻资讯</a></li>
<li class="" tt>
<a href="#products">产品介绍</a></li>
<li class="" tt>
<a href="#farm">农场问问</a></li>
<li class="" tt>
<a href="#board">问卷调查</a></li></ul>
<ul class="nav navbar-nav navbar-right animated fadeInRight">
<li><a href="" ng-click="goRegister()">
<span class="glyphicon glyphicon-user"></span>
注册</a></li>
<li><a href="" ng-click="goLogin()">
<span class="glyphicon glyphicon-log-in"></span>
登录</a></li></ul></p></p></nav></p>
JS
function tt(){
return{
restrict:'A',
scope:false,
link:function(scope,ele,attr){
ele。bind('click',function(){
$(this)。siblings()。attr('class', ' ');
$(this)。attr('class', 'active');
})}};}
angular
。module('main')
。directive('tt', tt);
使用AngularJS的指令模块定义了一个名为tt的属性指令,为拥有该属性的标签绑定一个鼠标点击事件,当用户点击某个标签页的时候他会搜索相同父节点下的兄弟标签,把他们的class属性全部重置为空,然后再把自己的class属性设置为active,然后配合css添加不同的样式用以区别,让用户能够直观看到自己现在所属的页面位置。指令模块作为AngularJS的主要功能模块,可以让用户自定义指令可用来修改页面的DOM的结构,例如添加、删除、修改HTML标签及其属性样式,并且还能够配合jQuery使用快速获取DOM节点。
Directive指令模块常用的属性包括这里的restrict属性,该属性有四个参数可选,为AECM,可设置指令调用方式。scope属性是用来设置当前变量环境,这里的false表示能够使用定义在父作用域里的变量以及函数。
图 4。2 关于禾粒
图 4。3 产品介绍
HTML
<p class="body-part1">
<p class="body-part1-left">
<h1 class="text-4em">ABOUT HELI'S FARM</h1>
<h1>关于禾粒</h1>
<p class="arrow-down">↓</p>
</p>
<img src="img/about。jpg" class="about">
<p class="body-part1-right">
<p>
禾粒社区农场是一群IT人士/大学教师/CXO(CEO,CTO^_^)联合创办的体验式农场，为社员们定制绿色健康的食品，同时也提供有趣的亲子教育，自助式的田园小聚，每个社区成员都参与农场劳作，体验生活的艰辛与收获的喜悦。
</p>
<p class="icon">
<p class="">
<img src="img/sy_icon1.png">
<span>
品牌理念<br>Brand Concept</span> HTML5禾粒农场智能管理系统门户网站设计(6):http://www.youerw.com/jisuanji/lunwen_96771.html