1、index.html:
<!DOCTYPE HTML>
<html ng-app="app">
<head>
<title>custom-directive</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/bootstrap.css">
<script src="../js/angular.js"></script>
</head>
<body>
<!-- 下面是指令与控制器交互的demo. -->
<div ng-controller="myCtrl">
<loader>滑动加载</loader>
</div>
<script src="./directive-controller.js"></script>
</body>
</html>
2、directive-controller.js：
var myModule = angular.module("app",[]);
myModule.controller('myCtrl', ['$scope', function($scope){
$scope.loadData=function(){
console.log("正在加载......");
}
}]);
myModule.directive('loader',function(){
return {
restrict:'AE',
// replace:true,
// transclude:true,//这也是个坑，声明了上面的替换和这个嵌套属性而不声明模板替换和嵌套的话，光在html中写自定义的指令标签会什么也出不来
// scope:{},//这是个坑，当控制器与指令交互的时候不能声明独立作用域，否则作用域变成私有，指令中将看不到控制器中定义的方法，程序会报错：说该私有作用域中找不到loadData方法
link:function(scope,element,attrs){
element.bind('mouseenter',function(event){
// scope.$apply("loadData()");
scope.loadData();
})
}
}
});