当前位置:首页 > Web开发 > 正文

AngularJS1.X指令

2024-03-31 Web开发

技术图片

<!DOCTYPE html> <html ng-app=‘myApp‘> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-controller="listCtrl"> <input type="text" ng-model="t" /> <test title="{{t}}" > <span>我的angularjs</span> </test> </div> </body> <script> var myApp=angular.module(myApp,[]); myApp.controller(listCtrl,function($scope){ $scope.logchore="motorola"; }); myApp.directive(test,function(){ return { restrict:E, scope:{ title:"@" }, template:<div >{{title}}+内部</div> } }); </script> </html>

<!DOCTYPE html> <html ng-app=‘myApp‘> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-controller="listCtrl"> <input type="text" ng-model="t" /> <test title="t" > <p>{{title}}</p> <span>我的angularjs</span> </test> </div> </body> <script> var myApp=angular.module(myApp,[]); myApp.controller(listCtrl,function($scope){ $scope.logchore="motorola"; }); myApp.directive(test,function(){ return { restrict:E, scope:{ title:"=" }, template:<div >{{title}}+内部</div> } }); </script> </html>

<!DOCTYPE html> <html ng-app=‘myApp‘> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-controller="listCtrl"> <test flavor="logchore()" ></test> </div> </body> <script> var myApp=angular.module(myApp,[]); myApp.controller(listCtrl,function($scope){ $scope.logchore=function(){ alert(ok); }; }); myApp.directive(test,function(){ return { restrict:E, scope:{ flavor:"&" }, template:<div ><button ng-click="flavor()"></button></div> } }); </script> </html>

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/42689.html