你的位置:首页 > Java教程

[Java教程]AngularJS中有关Directive的汇总


 

本篇通过几个例子对AngularJS中的Directive进行汇总。

例子1,单向绑定和双向绑定

 

<html ng-app="myApp"> <head>  <script src="angualr.js"></script>  <script>    (function(){      var name = "myApp";      requried = [];      myApp = null;            myApp = angualr.module(name, requires);            myApp.controller("AppCtrl", functioin($scope){        $scope.contacts = [          {firstname: "", lastname: "'},          ...        ];                $scope.addContact = function(){          $scope.contacts.push({firstname:"", lastname:"", isEnabled:true});        }                //切换视图        $scope.viewFile = function(){           if($scope.viewState){            return "contact_list.html";           } else{            return "contact_table.html";           }        }                $scope.onPartialLoad = function(){          console.log($scope.viewFile() + " loaded");        }      })    }());  </script> </head> <body ng-controller="AppCtrl">   </body></html>

 

==单向绑定

 

{{contacts.length}}<div ng-bind="contacts.length"></div><div ng-bind-template="">the first name is {{contacts[0].firstname}}</div>{{contacts[0].firstname}}{{::contacts.length}} 只展示一次数组长度,当数组长度有改变,这里不变{{ 2 + 3 }}{{ Math.min(4, 2)}}<button ng-click="addContact()">添加</button><div ng-non-bindable>this is {{hello }}</div> 这里的{{hello}}会显示出来...<tr ng-repeat="contact in contacts" ng-class="$odd ? 'odd':'even'">  <td>{{$index + 1}}</td>  <td>{{contact.firtname}}</td>  <td>{{contact.lastname}}</td>  <td>{{contact.isEnabled}}</td>  <td>{{$first}}</td>  <td>{{$last}}</td>  <td>{{$middle}}</td></tr>...<ng-include src="'contact_table.html'"></ng-include>//切换视图<input type="checkbox" ng-model="viewState">切换视图<ng-include src="viewFile()" onload="onPartialLoad()"></ng-include>

 

==使用Directive的几种方式

<div ng-bind="contacts.length"></div>
<div ></div>
<ng-include></ng-include>

==双向绑定

<input type="text" ng-model="contacts[0].firstname"/>

例子2,ng-switch

 

<html ng-app="myApp">  <head>    angular.js    <script>        (function(){        var name = "myApp[]",        requires = [],        myApp = null;                myApp = angular.module(name, requires);        myApp.controller("AppCtrl", function($scope){          $scope.data = {};        });      }());    </script>  </head>  <body ng-controller="AppCtrl">  </body></html>

 

页面部分

 

<div ng-repeat="channel in ['None', 'Tv', 'kitty']" ng-cloak>  <input type="radio" name ="leisure" value="{{channel}}" ng-model="data.whichChannel" ng-checked="$first" />{{channel}}</div><div ng-switch on="data.whichChannel">  <div ng-switch-default>this is none</div>  <div ng-switch-when="Tv">this is tv</div>  <div ng-switch-when="kitty">this is kitty</div></div>

 

以上,

● ng-checked 勾选
● ng-switch切换显示其中的内容
● 当点击Tv相关的这个RadioButton,把Tv这个值赋值给了data对象的whichChannel字段,whichChannel字段值得改变会告诉ng-swich所在的div,其子元素的ng-switch-when值如果和当前的whichChannel字段值匹配,就显示
● ng-cloak 避免绑定数据的时候页面闪烁

例子3,显示、隐藏、移除元素,ng-show, ng-hide, ng-if

$scope.toggleNewContact = false;$scope.shwoNewContactForm = function(){  $scope.toggleNewContact = true;}<button ng-click="showNewContactForm()">Add New Contact</button><form ng-show="toggleNewContact">  <button ng-click="toggleNewContact = false">Cancel</button></form><tr ng-repeat="contact in contacts" ng-if="contact.isEnabled"></tr>

 

例子4,勾选,只读,禁用,链接

 

$scope.checkMe = true;$scope.url = "http://google.com";$scope.imgSrc = "hi.jpeg";//勾选<input type="checkbox" ng-checked="{{checkME}}" /> check me//禁用按钮<button ng-disabled="{{checkMe}}">Click me</button>//只读<input type="text" value="he" ng-readonly="{{checkMe}}" />//链接<a href="{{url}}">go</a><a ng-href="{{url}}">go</a> 推荐使用//图片<img ng-src="{{imgSrc}}"/>

 

例子5,ng-style

 

<button ng-click="styles={'color':'red'}">set color</button><button ng-click="styles={'font-weight':'bold'}">bold</button><button ng-click="styles={'font-style':'italic'}>italic></button><p ng-color: #ff0000;">styles">hello</p>

 

例子6,ng-class

 

.strike{
    text-decoration:line-through;
}

.bold{
    font-weight:bold;
}

.red{
    color:red;
}

==把一个值赋值给ng-class

//文本框和controller中的style变量绑定起来
<input type="text" ng-model="style" />
<p ng->he</p>

==把一个对象赋值给ng-class

<input type="checkbox" ng-model="deleted" /> deleted
<input tyep="checkbox" ng-model="important" /> important
<input type="checkbox" ng-model="error"> error
<p ng->hello</p>


==把一个数组赋值给ng-class

//运用所有的class
<p ng->hi</p>

另外,

<tr ng-repeat="contact in contacts" ng-class-odd="'odd'" ng-class-even="'even'"></tr>

例子7, 事件

ng-click, ng-mousedown, ng-mouseenter, ng-mouseleave, ng-mouseup

例子8,过滤


==对数组元素过滤

 

$scope.courses = [  {name:"", category:"", timeline:20, price:25},  ...];$scope.getTargetDate = function(days){  var now = new Date();  return now.setDate(now.getDate() + days);}<tr ng-repeat="course in courses">  <td>{{$index + 1}}</td>  <td>{{course.name | upplercase}}</td>  <td>{{course.category | lowercase }}</td>  <td>{{getTargetDate(course.timeline) | date: 'dd MMM yy' | uppercase }}</td>  <td>{{course.price | currency: "¥" }}</td>  <td>{{course | json}}</td></tr>

 

==对整个数组过滤

 

$scope.limitVal = 10;$scope.lessThan25 = function(item){  return item.price < 25;}{{courses.length}}<button ng-click="limitVal = 5">5</button><button ng-click="limitVl = 10">10</button>//<input type="text" ng-model="searchStr" />//<input type="text" ng-model="name" />//<input type="text" ng-model="category"/>//<tr ng-repeat = "course in courses | limitTo: limitVal | filter: searchStr">//<tr ng-repeat = "course in courses | limitTo: limitVal | filter: {name: name, category:category}">//<tr ng-repeat = "course in courses | limitTo: limitVal | filter: lessThan25">//<tr ng-repeat = "course in courses | limitTo: limitVal | orderBy: '-price'"><tr ng-repeat = "course in courses | limitTo: limitVal | orderBy: ['name','-price']">  <td>{{$index + 1}}</td>  <td>{{course.name}}</td>  <td>{{course.category}}</td>  <td>{{course.timeline}}</td>  <td>{{course.price}}</td></tr>


所以filter能接受的包括字符串、对象和函数。