AngularJS1.X指令
<!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
- 上一篇:Centos下Yum安装PHP5.5,5.6,7.0
- 下一篇:CSS伸缩布局