zoukankan      html  css  js  c++  java
  • 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() 等;

  • 相关阅读:
    Java基础(六)判断两个对象相等:equals、hashcode、toString方法
    同时找最大最小值
    0-1背包问题
    大数相加
    单例模式(singleton pattern)
    House Robber
    Binary Tree Paths
    双向链表的插入
    工厂模式(factory pattern)
    装饰者模式(decorator pattern)
  • 原文地址:https://www.cnblogs.com/lhd404/p/9375911.html
Copyright © 2011-2022 走看看