6、自定义filter 、directive、Angular组件技术

最新推荐文章于 2022-06-15 17:26:27 发布

4911071420313

最新推荐文章于 2022-06-15 17:26:27 发布

阅读量277

点赞数

分类专栏： angular_智能社

angular_智能社专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、filter 过滤器

– 输出数据之前处理一下
– 自定义过滤器

app.filter('名字',function(){
    // filter 的代码
})

e.g

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script>
        var app = angular.module('wbx',[]);
        app.filter('myFilter',function(){
            alert('外层函数')
            return function(input){
                alert('内层函数')
                return input + 5;
            }
        })
        app.controller("con",function($scope){
            $scope.arr = [1,2,3,4];
        })
    </script>
    </head>
<body>
    <div ng-app="wbx" ng-controller="con">
        <ul>
            <li ng-repeat="v in arr">{{v | myFilter}}</li>
        </ul>
    </div>
</body>
</html>

2、指令directive 增强HTML 的功能

app.directive('abc',function(){
    var json = {
        restrict:'ECMA', // 约束，指令能在哪用
        template:'<span>abc</span>', // 模板
        replace:true
    }
    return json
})

– 占位符为原始内容站位

<ng-transclude></ng-transclude>

– transclude
1）标签

<ng-transclude></ng-transclude>

2）属性

transclude:true/false

e.g

app.directive('abc',function(){
    var json = {
        restrict:'E',
        template:'<ng-transclude></ng-transclude><a href="javascript:void();">X</a>',
        transclude:true // 嵌入
    }
    return json;
})

4911071420313

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6、自定义filter 、directive、Angular组件技术

1、filter 过滤器– 输出数据之前处理一下 – 自定义过滤器app.filter('名字',function(){ // filter 的代码})e.g&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;script src="http://cdn...
复制链接

扫一扫

专栏目录