• angularJS指令--继承父级指令的方法


    一个指令可以继承父级指令中的方法,父级指令把需要暴漏出去的方法放到controller中去,继承方法的指令设置  required:‘^parent’ ;

    <!DOCTYPE html>
    <html>
    <head>
    	<title>ng1</title>
    	<script type="text/javascript" src="../lib/angular.js"></script>
    </head>
    <body ng-app="app">
    	<div ng-controller="myCtrl">
    		<dema ng-click="clickWord()" yiji></dema>
    		<dema ng-click="clickWord()" erji></dema>
    		<dema ng-click="clickWord()" dazhao></dema>
    		<dema ng-click="clickWord()" yiji erji dazhao></dema>
    	</div>
    
    	<script type="text/javascript">
    		var app = angular.module('app',[]);
    		app.controller('myCtrl',['$scope',function($scope){
    			$scope.clickWord = function(){
    				console.log('clickWord')
    			}
    		}])
    
    		app.directive('dema',function(){
    			return{
    				restrict:'EA',
    				template:'<h1>德玛西亚</h1>',
    				link:function(scope,element,attr){
    					//操作指令本身的方法
    					element.addClass('btn btn-default');
    					element.bind('mouseenter',function(){
    						console.log(scope.jineng);
    					})
    				},
    				scope:{},
    				controller:function($scope){
    					//需要被其他指令继承的方法
    					$scope.jineng = [];
    					this.addfirst = function(){
    						$scope.jineng.push('第一级技能')
    					}
    					this.addSecond = function(){
    						$scope.jineng.push('第二级技能')
    					}
    					this.addThird = function(){
    						$scope.jineng.push('加大招')
    					}
    				}
    			}
    		})
    
    		app.directive('yiji',function(){
    			return{
    				restrict:'EA',
    				link:function(scope,element,attr,dema){
    					dema.addfirst();
    				},
    				require:'^dema'
    			}
    		})
    
    		app.directive('erji',function(){
    			return{
    				restrict:'EA',
    				require:'^dema',
    				link:function(scope,element,attr,dema){
    					dema.addSecond();
    				}
    			}
    		})
    
    		app.directive('dazhao',function(){
    			return{
    				restrict:'EA',
    				require:'^dema',
    				link:function(scope,element,attr,dema){
    					dema.addThird();
    				}
    			}
    		})
    	</script>
    </body>
    </html>
    

      注:angularJS内置了简化版的jq,即jqLite;所以可以在link,或controller中使用jq的方法;addClass()  bind() 等;

  • 相关阅读:
    php无限极分类
    HDU 1176 免费馅饼 (类似数字三角形的题,很经典,值得仔细理解的dp思维)
    HDU 1158(非常好的锻炼DP思维的题目,非常经典)
    HDU 1165 公式推导题
    HDU 1069 Monkey and Banana(转换成LIS,做法很值得学习)
    HDU 1059(多重背包加二进制优化)
    HDU 1058(打表)
    oracle11g之管理oracle数据库笔记(理论基础知识)
    oracle11g之Oracle体系结构(理论基础知识)
    HDU 1025 LIS二分优化
  • 原文地址:https://www.cnblogs.com/lhd404/p/9375911.html
Copyright © 2020-2023  润新知