AngularJS 02

最新推荐文章于 2019-11-07 18:48:51 发布

原创最新推荐文章于 2019-11-07 18:48:51 发布 · 390 阅读

0 ·

CC 4.0 BY-SA版权

angularJS 专栏收录该内容

5 篇文章

订阅专栏

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

<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>