angularJS指令--在各自的控制器里调用不同的函数

最新推荐文章于 2021-08-06 15:43:08 发布

转载最新推荐文章于 2021-08-06 15:43:08 发布 · 138 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lhd404/p/9375662.html

文章标签：

#javascript #ViewUI

本文介绍如何在AngularJS中实现自定义指令与不同控制器之间的交互。通过示例展示了同一个自定义指令如何根据不同控制器调用不同的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们自定义的指令可能用在不同的控制器中，在不同的控制器中指令执行的方法或一样，或不一样，对应的操作也不一样；

讲一下，自定义在不同的控制器怎么执行不同的函数；

<!DOCTYPE html>
<html>
<head>
	<title>ng1</title>
	<script type="text/javascript" src="../lib/angular.js"></script>
</head>
<body ng-app="app">
	<div ng-controller="helloTime">
		<loaddata load="loadData()"></loaddata>
	</div>

	<div ng-controller="helloTime2">
		<loaddata load="loadData2()"></loaddata>
	</div>
	<script type="text/javascript">
		var app = angular.module('app',[]);
		app.controller('helloTime',['$scope',function($scope){
			$scope.loadData = function(){
				console.log('加载数据。。。。')
			}
		}])
		app.controller('helloTime2',['$scope',function($scope){
			$scope.loadData2 = function(){
				console.log('加载数据222222。')
			}
		}])

		

		app.directive('loaddata',function(){
			return {
				restrict:'EA',
				template:'<h1>加载数据</h1>',
				link:function(scope,element,attr){
					element.bind('mouseenter',function(){
						// scope.$apply('loadData()')
						// scope.loadData()
						scope.$apply(attr.load)
					})
				}
			}
		})
	</script>
</body>
</html>

　　注：在指令中定义一个自定义属性，在link方法中可以获取这个属性；然后通过scope.$apply(attr.load);执行这个属性对应的方法；

转载于:https://www.cnblogs.com/lhd404/p/9375662.html