AngularJS 02

【Help】

于 2015-12-14 13:54:07 发布

阅读量376

点赞数

CC 4.0 BY-SA版权

分类专栏： angularJS

本文链接：https://blog.youkuaiyun.com/zhanglong_longlong/article/details/50293849

angularJS 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用AngularJS创建自定义指令的例子。通过定义三个不同的指令：supermanss、enter 和 leave，实现了页面上的交互效果。当鼠标移入指定元素时会触发特定样式的变化，而移出时则恢复原状。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<div ng-app="Ng">
    <div supermanss></div>

    <div enter="panel" leave>鼠标移入移出</div>
</div>



<script>
    var ng = angular.module("Ng", []);

    ng.directive("supermanss", function () {
        return { restrict: "A", link: function () { alert("Hello")} };

    })

    ng.directive("enter", function(){return function (scope,element,attr) {
        element.bind("mouseenter", function () {
            // element.addClass("panel");
            element.addClass(attr.enter);
        })
    }
    })

    ng.directive("leave", function () {

        return function (scope, element, attr)
        {
            element.bind("mouseleave", function () {

                // element.removeClass("panel");
                element.removeClass(attr.enter);
            })

        }
    })
</script>