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>

1. angular 模块化之directive
2. [Angular Directive] Structure directive and
3. Angular--Directive
4. angular directive
5. Angular directive&&Vue component
6. angular指令 directive
7. Angular 2 Directive
8. angular directive scope
9. angular之directive(二)
10. [Angular] Directive. 1
更多相关文章...
• Lua 模块与包 - Lua 教程
• DTD - XML 构建模块 - DTD 教程
• 委托模式
• IntelliJ IDEA代码格式化设置