<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>自定义指令间的互相交互</title> <script type="text/javascript" src="https://www.jb51.net/js/angular.min.js"></script> </head> <body> <div> <hello> <hi></hi> </hello> </div> <script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.directive('hello',function(){ return { restrict : 'E', replace : true, transclude : true, //允许自定义指令的嵌套，通过ng-transclude指定嵌套的范围 controller : function($scope){ $scope.name = 'xiecg'; this.name = 'xiecg'; //使用this共享给其他指令 }, template : '<div>hello angular <h1 ng-transclude></h1></div>' }; }); m1.directive('hi',function(){ return { restrict : 'E', replace : true, require : '^hello',//hello指令属性hi指令的父级，需要用^符号指定。如果无法指定，使用?容错处理。 template : '<span>hi angular {{name}}</span>', link : function(scope,element,attr,reController){ console.log(reController); //得到父级hello指令中共享出来的数据 } }; }); </script> </body> </html>
Angular的自定义指令以及实例(2)
内容版权声明：除非注明，否则皆为本站原创文章。