本篇通过几个例子对AngularJS中的Directive进行汇总。例子1,单向绑定和双向绑定 <html ng-app="myApp"> <head> <script src="angualr.js"& ...
本篇通过几个例子对AngularJS中的Directive进行汇总。例子1,单向绑定和双向绑定
<html ng-app="myApp"> <head> <script src='/images/loading.gif' data-original="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>
<div ng-bind="contacts.length"></div>==双向绑定<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>
● ng-checked 勾选例子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>
.bold{.red{==把一个值赋值给ng-class//文本框和controller中的style变量绑定起来==把一个对象赋值给ng-class<input type="checkbox" ng-model="deleted" /> deleted//运用所有的class另外,<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,过滤
原标题:AngularJS中有关Directive的汇总
关键词:JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。