大佬教程收集整理的这篇文章主要介绍了AngularJS Directive的使用，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
reStrict
replace
template
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>AngularJS $http</title> <link rel="stylesheet" href="css/foundation.min.css"> </head> <body> <div ng-app="app"> <!--<Hello></Hello>--> <!--<div Hello></div>--> <div class="Hello"></div> <div class="geek"></div> </div> </body> <script src="js/angular.min.js"></script> <script src="app.js"></script> </html>
var app = angular.module('app',[]); app.directive('Hello',function () { return { /*reStrict:'E', replace:true,//替换掉directive自定义的名称 template:'<div>Hello World</div>'*/ /*reStrict:'A', link:function () { alert("我在这里"); }*/ reStrict:'C',link:function () { alert("我在这里"); } } }) app.directive('geek',function () { return { reStrict:'C',link:function () { alert("我在这里geek"); } } })
(2)Directive和Controller之间的会话
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>AngularJS $http</title> <link rel="stylesheet" href="css/foundation.min.css"> </head> <body> <div ng-app="app"> <div ng-controller="AppCtrl"> <div enter="loadMoreData()">I'm here</div> </div> </div> </body> <script src="js/angular.min.js"></script> <script src="app.js"></script> </html>
:12pt; BACkground-color:rgb(199,[]) app.controller('AppCtrl',function ($scopE) { $scope.loadMoreData = function () { alert("doing..."); } }) app.directive('enter',function () { return { reStrict:'A',//默认也是A link:function (scope,element,attrs) { element.bind('mouseenter',function () { scope.$apply(attrs.enter); }) } } })
----------------------------------------
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>AngularJS $http</title> <link rel="stylesheet" href="css/foundation.min.css"> </head> <body> <div ng-app="app"> <food apple orange banana>所有食物</food><br/> <food apple orange>所有食物</food> </div> </body> <script src="js/angular.min.js"></script> <script src="app.js"></script> </html>
:12pt; BACkground-color:rgb(199,[]) 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,function () { console.log(scope.foods); }); } } }) app.directive('apple',function () { return { require:'food',attrs,foodCtrl) { foodCtrl.addApple(); } } }) app.directive('orange',foodCtrl) { foodCtrl.addOrange(); } } }) app.directive('banana',foodCtrl) { foodCtrl.addBanana(); } } })
(3)使用angular.element操作Dom
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>AngularJS $http</title> <link rel="stylesheet" href="css/foundation.min.css"> </head> <body> <div ng-app="app"> <!--<div enter leave>I'm here</div>--> <Hello></Hello> </div> </body> <script src="js/angular.min.js"></script> <script src="app.js"></script> </html>
:12pt; BACkground-color:rgb(199,[]) app.directive('enter',function () { return function (scope,attrs) { console.log(element); element.bind('mouseenter',function () { element.addClass("alert-Box"); }) } }) app.directive('leave',attrs) { console.log(element); element.bind('mouSELEave',function () { element.removeClass("alert-Box"); }) } }) app.directive('Hello',template:'<div><input ng-model="txt"></div><div>{{txt}}</div>',element) { scope.$watch('txt',function (newVal) { if(newVal === 'error'){ element.addClass('alert-Box alert'); } }) } } })
以上是大佬教程为你收集整理的AngularJS Directive的使用全部内容，希望文章能够帮你解决AngularJS Directive的使用所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。