angular指令 mouseover mouseleave 隐藏、显示内容


<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>title>
    <script src="../angularjs/angular.min.js">script>
head>
<body>
    <h4 mouse-over-leave hover="hover">测试一下 <span ng-show="hover">显示内容span>h4>
body>
html>
<script>
    var myApp = angular.module('myApp', []);
    myApp.directive('mouseOverLeave', function(){
        return {
            restrict: 'A',
            scope: {
                hover: "="
            },
            link: function(scope, elem, attr){
                elem.bind('mouseover', function(){
                    elem.css("cursor", "pointer");
                    scope.$apply(function(){
                        scope.hover = true;
                    });
                });
                elem.bind('mouseleave', function(){
                    scope.$apply(function(){
                        scope.hover = false;
                    });
                });
            }
        }
    });
script>

你可能感兴趣的:(Angular)