<!DOCTYPE html>
<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指令 mouseover mouseleave 隱藏、顯示內容
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章