angular 명령 mouseover mouseleave 내용 숨기기, 표시

3777 단어 Angular

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

좋은 웹페이지 즐겨찾기