你的位置:首页 > 软件开发 > Java > AngularJS中有关Directive的汇总

AngularJS中有关Directive的汇总

发布时间:2016-01-22 16:00:03
本篇通过几个例子对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

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。