<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>