anjularjs-filter,directive,angular模塊化

時間 2020-07-18

標籤 anjularjs filter directive angular 模塊化欄目 AngularJS 简体版

原文原文鏈接

一、過濾器javascript

<!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 src="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>

二、directive：加強HTMLcss

能夠使用 .directive 函數來添加自定義的指令。html

要調用自定義指令，HTML 元素上須要添加自定義指令名。java

使用駝峯法來命名一個指令， runoobDirective, 但在使用它時須要以 - 分割, runoob-directive:app

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="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 值能夠是如下幾種:iphone

E 做爲元素名使用ide
A 做爲屬性使用模塊化
C 做爲類名使用函數
M 做爲註釋使spa

restrict 默認值爲 EA, 便可以經過元素名和屬性名來調用指令。

三、directive>ng-transclude 嵌入佔位符

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="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>

四、directive-下拉框組建

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="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>

五、angular模塊化技術

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="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>