zoukankan      html  css  js  c++  java
  • angularJS指令--在各自的控制器里调用不同的函数

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

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

    <!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);执行这个属性对应的方法;

  • 相关阅读:
    回顾初心
    团队作业6(代码复审+事后诸葛亮)
    Alpha阶段项目复审(鸽牌开发小分队)
    事后诸葛亮(鸽牌开发小分队)
    团队作业5
    第七篇Scrum冲刺博客
    第六篇Scrum冲刺博客
    第五篇Scrum冲刺博客
    第四篇Scrum冲刺博客
    第三篇Scrum冲刺博客
  • 原文地址:https://www.cnblogs.com/lhd404/p/9375662.html
Copyright © 2011-2022 走看看