1.常用指令
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title> ???<link rel="stylesheet" href="css/foundation.min.css"> ???<style> ???????.tx{ ???????????width: 50px; ???????????height: 50px; ???????????margin-bottom: 10px; ???????????margin-left: 80px; ???????} ???</style></head><!--ng-bind,{{}},ng-model,ng-show/hide,ng-if,ng-checked,ng-src--><!--ng-href,ng-class,ng-selected,ng-submit,ng-disable,ng-change--><body style="padding:10px" ng-app="app"><div ng-controller="UserCtrl"> ???<form name="f" ng-submit="register(user)"> ???????<fieldset> ???????????<legend>基本信息</legend> ???????????<img ng-src="{{user.icon}}" ????????????????ng-class="{‘tx‘:user.showicon}"/> ????????????????<!--ng-hide="user.isShowImg"--> ????????????????<!--ng-show="user.isShowImg"--> ????????????????<!--ng-if="user.isShowImg"--> ???????????<div> ???????????????<input type="text" ng-model="user.uname" placeholder="用户名" required /> ???????????????<input type="password" placeholder="密码"/> ???????????????职位：<select> ???????????????????<option value="">--请选择--</option> ???????????????????<option value="1" ng-selected="user.zw==‘1‘">Java工程师</option> ???????????????????<option value="2" ng-selected="user.zw==‘2‘">web工程师</option> ???????????????</select> ???????????????性别：<input type="radio" ??????????????????????ng-checked="user.sex==‘1‘" ??????????????????????name="sex"> 男 ???????????????<input type="radio" ??????????????????????ng-checked="user.sex==‘0‘" ??????????????????????name="sex"> 女 ???????????</div> ???????</fieldset> ???????<fieldset> ???????????<legend>爱好</legend> ???????????<div> ???????????????<input type="checkbox" ng-checked="isChecked(1)" name="爱好"> 篮球 ???????????????<input type="checkbox" ng-checked="isChecked(2)" name="爱好"> 足球 ???????????????<input type="checkbox" ng-checked="isChecked(3)" name="爱好"> 排球 ???????????</div> ???????</fieldset> ???????<button type="submit" ???????????????ng-disabled="f.$invalid" ???????????????class="button expand">提交</button> ???</form></div></body><script src="js/angular.min.js"></script><script> ???angular.module(‘app‘,[]) ???.controller(‘UserCtrl‘,function($scope){ ???????$scope.user={ ???????????isShowImg:true, ???????????showicon:true, ???????????icon:"images/demo.jpg", ???????????uname:"", ???????????pwd:"", ???????????zw:"2", ???????????sex:"1", ???????????aihao:[1,3] ???????}; ???????$scope.isChecked=function(n){ ???????????var isok=false; ???????????for(var i=0;i<$scope.user.aihao.length;i++){ ???????????????if(n==$scope.user.aihao[i]){ ???????????????????isok=true; ???????????????????break; ???????????????} ???????????} ???????????return isok; ???????}; ???????$scope.register=function(u){ ???????????console.log(u); ???????} ???});</script></html>2.angular与element（1）
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title> ???<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css"></head><body><div ng-app="app"> ???<div enter leave>我在这</div></div></body><script src="js/angular.min.js"></script><script>var app=angular.module(‘app‘,[]);app.directive(‘enter‘,function(){ ???return function(scope,element,attrs){ ???????element.bind(‘mouseenter‘,function(){ ???????????element.addClass(‘alert-box‘); ???????}) ???}});app.directive(‘leave‘,function(){ ???return function(scope,element,attrs){ ???????element.bind(‘mouseleave‘,function(){ ???????????element.removeClass(‘alert-box‘); ???????}) ???}});</script></html>angular与element（2）
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title> ???<link rel="stylesheet" href="css/foundation.min.css"></head><body><div ng-app="app"> ???<hello></hello></div></body><script src="js/angular.min.js"></script><script>var app=angular.module(‘app‘,[]);app.directive(‘hello‘,function(){ ???return { ???????restrict:"E", ???????template:‘<div><input ng-model="txt"></div><div>{{txt}}</div>‘, ???????link:function(scope,element){ ???????????scope.$watch(‘txt‘,function(newVal){//监听 ???????????????if(newVal===‘error‘){ ???????????????????element.addClass(‘alert-box alert‘) ???????????????} ???????????}) ???????} ???}});</script></html>3.自定义HTML组件
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title> ???<link rel="stylesheet" href="css/bootstrap.min.css"/></head><body><p>p:restrict含义(A属性，E标签元素（结合template插入），C类名)与应用，replace使用，template使用</p><div ng-app="app"> ???<div hello class="leiming"></div></div></body><script src="js/angular.min.js"></script><script>var app=angular.module(‘app‘,[]); ???app.directive(‘hello‘,function(){// ???????return {// ???????????restrict:‘E‘,//自定义HTML标签，在dom中显示标签名为hello// ???????????replace:true,//默认false，替换掉自定义的directive名称，即把hello替换为div// ???????????template:‘<div>hello Angularjs</div>‘// ???????}; ???????return { ???????????restrict:‘A‘, ???????????link:function(){ ???????????????alert("我是属性") ???????????} ???????}; ???}); ???app.directive(‘leiming‘,function(){ ???????return { ???????????restrict:‘C‘, ???????????link:function(){ ???????????????alert("我是类名") ???????????} ???????}; ???});</script></html>4.directive与controller
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title></head><body> ???<!--<p>controller属性使用，link使用，directive中调用controller的方法</p>--> ???<div ng-app="app"> ???????<!--<div ng-controller="AppCtrl">--> ???????????<!--<div enter="loadMoreData()">加载数据</div>--> ???????<!--</div>--> ???????<food apple orange banana>所有食物</food> ???????<food apple banana>所有食物</food> ???</div></body><script src="js/angular.min.js"></script><script>var app=angular.module(‘app‘,[]);//app.controller(‘AppCtrl‘,function($scope){// ???$scope.loadMoreData=function(){// ???????alert("正在加载数据...")// ???};// ???$scope.delData=function(){// ???????alert("正在删除数据...")// ???}//});//app.directive(‘enter‘,function(){// ???return function(scope,element,attrs){// ???????element.bind(‘mouseenter‘,function(){// ???????????//scope.loadMoreData();// ???????????//scope.$apply(‘loadMoreData()‘);// ???????????scope.$apply(attrs.enter);// ???????})// ???}//});app.directive(‘food‘,function(){ ???return { ???????restrict:‘E‘, ???????scope:{}, ???????controller:function($scope){ ???????????$scope.foods=[]; ???????????this.addApple=function(){ ???????????????$scope.foods.push(‘Apple‘); ???????????}; ???????????this.addOrange=function(){ ???????????????$scope.foods.push(‘Orange‘); ???????????}; ???????????this.addBanana=function(){ ???????????????$scope.foods.push(‘Banana‘); ???????????} ???????}, ???????link:function(scope,element,attrs){ ???????????element.bind(‘mouseenter‘,function(){ ???????????????console.log(scope.foods); ???????????}); ???????} ???}});app.directive(‘apple‘,function(){ ???return { ???????require:‘food‘, ???????link:function(scope,element,attrs,foodCtrl){ ???????????foodCtrl.addApple(); ???????} ???}});app.directive(‘orange‘,function(){ ???return { ???????require:‘food‘, ???????link:function(scope,element,attrs,foodCtrl){ ???????????foodCtrl.addOrange(); ???????} ???}});app.directive(‘banana‘,function(){ ???return { ???????require:‘food‘, ???????link:function(scope,element,attrs,foodCtrl){ ???????????foodCtrl.addBanana(); ???????} ???}});</script></html>Angular.js进阶
原文地址：https://www.cnblogs.com/forever-xuehf/p/9108093.html