anjularjs-filter模块化
标签：
JavaScript
1、过滤器
<!doctype html><!-- ng-app使用范围HTML --><html lang="en" ng-app="test"> <head> <meta <meta charset=" " set="UTF-8"> <title>Document</title> <style type="text/css" media="screen"> #div1 input {background: #CCC;} #div1 input.active {background: yellow;} #div1 div {width: 200px;height: 200px;border: 1px solid #000;} </style> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="angular.min.js"></script> <script type="text/javascript"> var app=angular.module('test', []) app.controller('cont1', function($scope){ $scope.arr=[12.4,12,3,44] $scope.timer=12341341234 }) app.filter('my_filter',function () { //只执行一次，进行初始化 //alter() return function (input) { //执行多次 return input+19 } }) </script> <style type="text/css" media="screen"> </style></head><body ng-controller="cont1"> <ul> <li ng-repeat="v in arr">{{v|my_filter}}:{{timer|date:'yyyy年MM月dd日'}}</li> </ul></body></html>2、directive：增强HTML
可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="angular.min.js"></script> <script type="text/javascript"> var app=angular.module('test', []) app.directive("runoobDirective", function() { return { restrict : 'C', template : "<h1>自定义指令!</h1>" // replace : true // M 必须加上replace:true，替换原有元素；replace:false，插入标签 }; }); </script></head><body ng-app="test"> <runoob-directive>restrict:E</runoob-directive> <div runoob-directive>restrict:A</div> <span class="runoob-directive">restrict:C</span> <!-- directive: runoob-directive --></body></html>restrict 值可以是以下几种:
E作为元素名使用A作为属性使用C作为类名使用M作为注释使
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
3、directive>ng-transclude 嵌入 占位符
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="angular.min.js"></script> <script type="text/javascript"> var app=angular.module('test', []) app.directive("runoobDirective", function() { return { restrict : 'E', template : "<h1><ng-transclude></ng-transclude> 自定义指令!</h1>", transclude:true // replace : true // M 必须加上replace:true，替换原有元素；replace:false，插入标签 }; }); </script></head><body ng-app="test"> <runoob-directive>restrict:E</runoob-directive> <div runoob-directive>restrict:A</div> <span class="runoob-directive">restrict:C</span> <!-- directive: runoob-directive --></body></html>4、directive-下拉框组建
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="angular.min.js"></script> <script type="text/javascript"> var app=angular.module('test', []) app.controller('cont1', ['$scope', function ($scope) { $scope.str="" $scope.arr=['iphone','huawei','meizu','sansunm','lenovo'] }]) app.directive('drop', [function () { return { restrict: 'E', template: '<input type="text" ng-model="str">\ <ul>\ <li ng-repeat="a in arr" ng-show="a.indexOf(str)!=-1" >`a`</li>\ </ul>' }; }]) </script></head><body ng-app='test' ng-controller='cont1'> <drop></drop></body></html>5、angular模块化技术
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="angular.min.js"></script> <script type="text/javascript"> //angular.module() 创建模块mod1 angular.module('mod1', []).controller('mod1Ctrl', ['$scope', function ($scope) { $scope.a="mod1Ctrl" }]) //angular.module() 创建模块mod2 angular.module('mod2', []).controller('mod2Ctrl', ['$scope', function ($scope) { $scope.b="mod2Ctrl" }]) ////angular.module() 创建模块mod3,调用其他模块mod1,mod2 angular.module('mod3', ['mod1','mod2']) </script></head><!-- ng-app 使用模块mod3 --><body ng-app='mod3' > <div ng-controller="mod1Ctrl">`a`</div> <div ng-controller="mod2Ctrl">`b`</div> <div>`a`,`b`</div></body></html>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦