AngularJS Directive的使用

最新推荐文章于 2019-08-01 09:12:42 发布

u013063153

最新推荐文章于 2019-08-01 09:12:42 发布

阅读量571

点赞数

分类专栏： Angular

本文链接：https://blog.csdn.net/u013063153/article/details/52470052

版权

Angular 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

(1)使用Directive自定义HTML组件

restrict

replace

template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS $http</title>

    <link rel="stylesheet" href="css/foundation.min.css">
</head>
<body>
    <div ng-app="app">
        <!--<hello></hello>-->
        <!--<div hello></div>-->
        <div class="hello"></div>
        <div class="geek"></div>
    </div>
</body>
<script src="js/angular.min.js"></script>
<script src="app.js"></script>
</html>

var app = angular.module('app',[]);

app.directive('hello',function () {
    return {
        /*restrict:'E',
        replace:true,//替换掉directive自定义的名称
        template:'<div>Hello World</div>'*/

        /*restrict:'A',
        link:function () {
            alert("我在这里");
        }*/

        restrict:'C',
        link:function () {
            alert("我在这里");
        }
    }
})

app.directive('geek',function () {
    return {
        restrict:'C',
        link:function () {
            alert("我在这里geek");
        }
    }
})

(2)Directive和Controller之间的会话

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS $http</title>

    <link rel="stylesheet" href="css/foundation.min.css">
</head>
<body>
    <div ng-app="app">
        <div ng-controller="AppCtrl">
            <div enter="loadMoreData()">I'm here</div>
        </div>
    </div>
</body>
<script src="js/angular.min.js"></script>
<script src="app.js"></script>
</html>

var app = angular.module('app',[])

app.controller('AppCtrl',function ($scope) {
    $scope.loadMoreData = function () {
        alert("doing...");
    }
})

app.directive('enter',function () {
    return {
        restrict:'A',//默认也是A
        link:function (scope,element,attrs) {
            element.bind('mouseenter',function () {
                scope.$apply(attrs.enter);
            })
        }
    }
})

----------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS $http</title>

    <link rel="stylesheet" href="css/foundation.min.css">
</head>
<body>
    <div ng-app="app">
        <food apple orange banana>所有食物</food><br/>
        <food apple orange>所有食物</food>
    </div>
</body>
<script src="js/angular.min.js"></script>
<script src="app.js"></script>
</html>

var app = angular.module('app',[])

app.directive('food',function () {
    return {
        restrict:'E',
        scope:{},
        controller:function ($scope) {
            $scope.foods=[];
            this.addApple = function () {
                $scope.foods.push("apple");
            }
            this.addOrange = function () {
                $scope.foods.push("orange");
            }
            this.addBanana = function () {
                $scope.foods.push("banana");
            }
        },
        link:function (scope,element,attrs) {
            element.bind('mouseenter',function () {
                console.log(scope.foods);
            });
        }
    }
})

app.directive('apple',function () {
    return {
        require:'food',
        link:function (scope,element,attrs,foodCtrl) {
            foodCtrl.addApple();
        }
    }
})

app.directive('orange',function () {
    return {
        require:'food',
        link:function (scope,element,attrs,foodCtrl) {
            foodCtrl.addOrange();
        }
    }
})

app.directive('banana',function () {
    return {
        require:'food',
        link:function (scope,element,attrs,foodCtrl) {
            foodCtrl.addBanana();
        }
    }
})

(3)使用angular.element操作Dom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS $http</title>

    <link rel="stylesheet" href="css/foundation.min.css">
</head>
<body>
    <div ng-app="app">
        <!--<div enter leave>I'm here</div>-->
        <hello></hello>
    </div>
</body>
<script src="js/angular.min.js"></script>
<script src="app.js"></script>
</html>

var app = angular.module('app',[])

app.directive('enter',function () {
    return function (scope,element,attrs) {
        console.log(element);
        element.bind('mouseenter',function () {
            element.addClass("alert-box");
        })
    }
})

app.directive('leave',function () {
    return function (scope,element,attrs) {
        console.log(element);
        element.bind('mouseleave',function () {
            element.removeClass("alert-box");
        })
    }
})

app.directive('hello',function () {
    return {
        restrict:'E',
        template:'<div><input ng-model="txt"></div><div>{{txt}}</div>',
        link:function (scope,element) {
            scope.$watch('txt',function (newVal) {
                if(newVal === 'error'){
                    element.addClass('alert-box alert');
                }
            })
        }
    }
})

u013063153

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS Directive的使用

(1)使用Directive自定义HTML组件restrictreplacetemplatehtml>html lang="en">head> meta charset="UTF-8"> title>AngularJS $httptitle> link rel="stylesheet" href="css/foundation.min.css">
复制链接

扫一扫