Angular.element 的用法

最新推荐文章于 2024-05-20 09:53:11 发布

xiejunna

最新推荐文章于 2024-05-20 09:53:11 发布

阅读量2.8k

点赞数

分类专栏： angularJS1

本文链接：https://blog.csdn.net/xiejunna/article/details/53728776

版权

angularJS1 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

demo如下：

<html>

    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />



        <script type="text/javascript" src="js/angular.min.1.3.6.js"></script>
        <!--<script type="text/javascript" src="js/angular.min-1.6.x.js"></script>-->
        <style>
            .alert-box{
                width: 200px;height: 50px;background-color: aquamarine;
            }
            .alert-box2{
                width: 200px;height: 50px;background-color: red;
            }
        </style>
    </head>

    <body ng-app='myapp1' ng-controller="customersCtrl">
        <!--<enter>angularJs应用enter</enter>
        <leave >angularJs应用leave</leave>-->


        <div enter leave>angularJs应用</div>


        <hello></hello>


    </body>
    <script type="text/javascript">


        var app = angular.module('myapp1', []);
        app.controller('customersCtrl',function($scope){
            console.log("控制器");
        });


        app.directive("enter",function(){
            return function(scope,element,attrs){
                console.log(element);
                element.bind('mouseenter',function(){
                    console.log('鼠标移入进来了！！！');
                    element.addClass('alert-box');
                });
            }
        });

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

        app.directive("hello",function(){
            return {
                restrict:'E',
                template:'<div><input type="text" ng-model="txt"/></div><div>{{txt}}</div>',
                link:function(scope,element){
                    scope.$watch('txt',function(newval){
                        console.log('监听执行');
                        if (newval=='aaa') {
                            element.addClass('alert-box2');
                            console.log('error执行');
                        }
                    });
                }

            }
        });



    </script>

</html>

xiejunna

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Angular.element 的用法

demo如下：<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user
复制链接

扫一扫