发布网友 发布时间:2022-04-27 10:50
共1个回答
热心网友 时间:2022-04-22 16:17
指令和控制器的交互
<!DOCTYPE html>
<html ng-app="MyController">
<head>
<meta charset="utf-8">
<title>指令复用</title>
</head>
<body>
<div ng-controller="MyCtrl">
<loader>滑动加载</loader>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="js/directive-controller.js"></script>
</html>
上面的代码平淡无奇,有个控制器有个指令(loader),下面可以看到我们通过 directive创建了这个指令,并且我们通过link的方法给他赋值鼠标事件(mouseenter)。
var myMole = angular.mole('MyController',[]);
myMole.controller('MyCtrl',function($scope){
$scope.loadData = function(){
console.log("加载数据...");
}
})
myMole.directive('loader',function(){
return{
restrict:'AE',
link:function(scope,element,attr){
element.bind('mouseenter',function(){
scope.loadData();
})
}
}
})
我们来看看运行的结果,ok,我们打印出来 "加载数据..."