<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/angular.min.js"></script>
<script src="js/$Diretive&Diretive.js"></script>
</head>
<body>
<div ng-controller="MyCtrl1">
<loader howToLoad="loadData()">滑動加載</loader>
</div>
<div ng-controller="MyCtrl2">
<loader howToLoad="loadData2()">滑動加載</loader>
</div>
</body>
</html>
var app = angular.module('myApp', []);
app.controller('MyCtrl1', ['$scope', function($scope){
$scope.loadData=function(){
console.log("MyCtrl1---加載數據中...111");
}
}]);
app.controller('MyCtrl2', ['$scope', function($scope){
$scope.loadData2=function(){
console.log("MyCtrl2---加載數據中...22222");
}
}]);
app.directive("loader", function() {
return {
restrict:"AE",
link:function(scope,element,attrs){
element.bind('mouseenter', function(event) {
//scope.loadData();
// scope.$apply("loadData()");
// 注意這裏的坑，howToLoad會被轉換成小寫的howtoload
scope.$apply(attrs.howtoload);
});
}
}
});
當鼠標經過每個指令的時候，就會調用相應控制器上的函數，執行不同的功能，這就實現了執行在不同控制器的服用效果。