anjularjs-filter模組化

tankII發表於2021-09-09
JSFilter

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>


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/1795/viewspace-2815664/，如需轉載，請註明出處，否則將追究法律責任。

相關文章