angular指令和控制器交互
使用情况看代码里面注释说明
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>AngularJs指令属性transclude</title> <script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script> </head> <body ng-app='app'> <div ng-controller="mydemo"> <input type="text" value="" ng-model="user.name"/> {{sonData}} <br> {{showTopName}} <hr> <div> <textarea cols="30" rows="4" ng-model="text"></textarea></div> <hr> <my-directive ng-transclude> 9999 {{showTopName}}9999 showTopName之所以可以在这里显示，因为指令没有设置scope，所有数据共享 </my-directive> <hr> <div my-directive> hello这是没有设置ng-transclude所以不展示出来 </div> <select-data on-to-parent="acceptClick()" my-user="user" to-parent="sonData" show-top-name="showTopName" ></select-data> <hr> <!-- <select-data ></select-data> --> </div> </body> <script type="text/javascript"> var app = angular.module('app', []); app.directive("myDirective",myDirective); function myDirective(){ var directive={ restrict:"AE", template:"<div><h3>这是测试数据</h3></div>", replace:true, transclude:'element' //设置这个值，然后在指令上设置ng-transclude 就可以把指令中的内容展示，替换原来template的数据 }; return directive; }; app.directive("selectData",selectData); function selectData(myService){ //传一个服务进去 var directive={ restrict:"AE", template:" Say：{{user.name}} <div ng-click='newSonClick(88888)' >我来点击</div><div> to----【{{ newShowTopName}}】--->自己的数据{{newData}}---【】</div><div>指令：{{sonData}}</div> <input type='text' value='' ng-model='user.name'/>", // template:'<div>点击我，有惊喜哦</div>', scope:{ user: "=myUser", sonData:'=toParent',//son+xx表示在内部使用，toParent 表示对外且是属性 mySelf:"=" , sonClick: '&onToParent',//son+xxx表示在指令内部使用 onToParent 表示对外且是属性 showTopName:'=' }, controller:function($scope){ //必须使用$符号 $scope.newData="bigHello"; }, // replace:true, // controller:function(scope){ // scope.newData="bigHello"; // }, link:function(scope,el, attr){ //scope.sonData="我是son指令数据"; scope.newSonClick=function(toData){ // console.log(myService,"myService") myService.setServiceName(toData); //服务接收传参数 scope.sonClick(); //scope.mySelf="myself10000"; } // el.on("click",function(){ // 只有设置 scope:true才有效果，其他形式没有效果，会报topClick没有定义错误 // scope.topClick(); // }) scope.newShowTopName=scope.showTopName; //指令接受的值必须通过定义来，或者通过服务获取得到，否则无效，甚至报错 } } return directive; }; //创建服务 app.service("myService",myService); function myService(){ var serviceName; this.setServiceName=function(newName){ //赋值 serviceName=newName; } this.getServiceName=function(){ //取值 return serviceName; } console.log(serviceName,"aaaa"); }; app.controller("mydemo", ["$scope","myService",function ($scope,myService) { $scope.parentName="父层数据";//定义值 $scope.showTopName="父级数据"; $scope.acceptClick=function(){ //console.log(myService.getServiceName(),"接收"); $scope.showTopName=myService.getServiceName(); //父级接收服务传来的参数 } $scope.sonData="我来自父级"; //父级方法 $scope.topClick=function(){ alert("我是父级方法") } $scope.user = { name: 'hello', id: 1 }; }]) </script> </html>
父控制器的内容可以在自己控制范围内使用，包括子控制器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>AngularJs指令属性transclude</title> <script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script> </head> <body ng-app='app'> <div ng-controller="mydemo"> <input type="text" value="" ng-model="user.name"/> {{sonData}} <br> {{showTopName}} <hr> <div> <textarea cols="30" rows="4" ng-model="text"></textarea></div> <hr> <my-directive ng-transclude> 9999 {{showTopName}}9999 showTopName之所以可以在这里显示，因为没有设置scope，所有数据共享 </my-directive> <hr> <div my-directive> hello这是没有设置ng-transclude所以不展示出来 </div> <select-data my-user="user"></select-data> <hr> 【{{childTest}}】 <!-- <select-data ></select-data> --> <div ng-controller="myChild"> {{childTest}} <hr> {{showTopName}} </div> </div> </body> <script type="text/javascript"> var app = angular.module('app', []); app.directive("myDirective",myDirective); function myDirective(){ var directive={ restrict:"AE", template:"<div><h3>这是测试数据</h3></div>", replace:true, transclude:'element' //设置这个值，然后在指令上设置ng-transclude 就可以把指令中的内容展示，替换原来template的数据 }; return directive; }; app.directive("selectData",selectData); function selectData(myService){ //传一个服务进去 var directive={ restrict:"AE", template:" Say：{{user.name}} <div >我来点击</div><div> to------->自己的数据</div><div>指令：</div> <input type='text' value='' ng-model='user.name'/>", // template:'<div>点击我，有惊喜哦</div>', scope:{ user: "=myUser" }, // replace:true, link:function(scope,el, attr){ //scope.sonData="我是son指令数据"; scope.newSonClick=function(toData){ // console.log(myService,"myService") myService.setServiceName(toData); //服务接收传参数 scope.sonClick(); } // el.on("click",function(){ // 只有设置 scope:true才有效果，其他形式没有效果，会报topClick没有定义错误 // scope.topClick(); // }) } } return directive; }; //创建服务 app.service("myService",myService); function myService(){ var serviceName; this.setServiceName=function(newName){ //赋值 serviceName=newName; } this.getServiceName=function(){ //取值 return serviceName; } console.log(serviceName,"aaaa"); }; app.controller("mydemo", ["$scope","myService",function ($scope,myService) { $scope.parentName="父层数据";//定义值 $scope.showTopName="父级数据"; $scope.acceptClick=function(){ //console.log(myService.getServiceName(),"接收"); $scope.showTopName=myService.getServiceName(); //父级接收服务传来的参数 } $scope.sonData="我来自父级"; //父级方法 $scope.topClick=function(){ alert("我是父级方法") } $scope.user = { name: 'hello', id: 1 }; }]) app.controller("myChild",function($scope){ $scope.childTest="我是子控制器"; }); </script> </html>
效果
参考：https://blog.csdn.net/qq_29287973/article/details/74076552
