demo如下:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<script type="text/javascript" src="js/angular.min.1.3.6.js"></script>
<!--<script type="text/javascript" src="js/angular.min-1.6.x.js"></script>-->
<style>
.alert-box{
width: 200px;height: 50px;background-color: aquamarine;
}
.alert-box2{
width: 200px;height: 50px;background-color: red;
}
</style>
</head>
<body ng-app='myapp1' ng-controller="customersCtrl">
<!--<enter>angularJs应用enter</enter>
<leave >angularJs应用leave</leave>-->
<div enter leave>angularJs应用</div>
<hello></hello>
</body>
<script type="text/javascript">
var app = angular.module('myapp1', []);
app.controller('customersCtrl',function($scope){
console.log("控制器");
});
app.directive("enter",function(){
return function(scope,element,attrs){
console.log(element);
element.bind('mouseenter',function(){
console.log('鼠标移入进来了!!!');
element.addClass('alert-box');
});
}
});
app.directive("leave",function(){
return function(scope,element,attrs){
console.log(element);
element.bind('mouseleave',function(){
console.log('鼠标移开了!!!');
element.removeClass('alert-box');
});
}
});
app.directive("hello",function(){
return {
restrict:'E',
template:'<div><input type="text" ng-model="txt"/></div><div>{{txt}}</div>',
link:function(scope,element){
scope.$watch('txt',function(newval){
console.log('监听执行');
if (newval=='aaa') {
element.addClass('alert-box2');
console.log('error执行');
}
});
}
}
});
</script>
</html>