angular指令scope隔离数据
111
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>AngularJS 指令属性link</title> <script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script> <script src="https://cdn.bootcss.com/angular.js/1.7.0/angular-route.min.js"></script> </head> <body ng-app='app'> <div> 指令中的控制器里面的scope参数可以穿越多层，是因为没有设置scope值，而独立的控制器里的scope，只能在自己的控制器范围内有效，即在子控制器里面也可以。 <br> {{vm.aaaa}} <hr> {{test}} <hr> <custom-directive></custom-directive> <hr> 9999 {{bigTest}} <hr> <div ng-controller="myTest"> {{vm.aaaa}} <br> {{bigTest}} <br> {{test}} <br> ======== {{sonTest}} 777 <hr> <div ng-controller="childTest"> {{sonTest}} <br> {{bigTest}} </div> </div> </div> <script type="text/javascript"> angular .module('app',[]) .directive('customDirective', customDirective).controller("myTest",function($scope){ $scope.bigTest="我可以穿越么?"; }).controller("childTest",function($scope){ $scope.sonTest="我是son控制器"; }); function customDirective() { var directive = { restrict: 'EA', template: '<div>{{test}} {{vm.aaaa}}</div>', //scope:true,是你在起作用 link: function(){}, controller: directiveController, controllerAs: 'vm' //注释之后顶层 vm.aaaa 失效 }; return directive; } function directiveController($scope) { var vm = this; vm.aaaa="这是数据"; console.log(vm,"ddddd") $scope.test = "I'm from Controller"; // return vm; } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>AngularJs控制器</title> <script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script> </head> <body ng-app='app'> {{vm.aaaa}} {{fromData}} <div > <div >我是父类</div> {{myaddress}} {{myData}} <hr> {{vm.aaaa}} <my-directive my-data="myaddress" my-click="topClick(outData)"></my-directive> </div> </body> <script type="text/javascript"> var app = angular.module('app', []); app.directive('myDirective',myDirective); function myDirective(){ var directive={ restrict:'AE', template:"<div ng-click='sonClick(1111)'>点击我</div><div>内部：{{innerData}}//{{fromData}}</div>", scope:{ selectData:"&myClick", innerData:"=myData" }, controller:directiveController, link:function(scope,ele,attr){ scope.sonClick=function(aaa){ scope.selectData({outData:aaa}); } }, controllerAs: 'vm' } return directive; }; function directiveController($scope) { var vm = this; vm.aaaa="这是数据"; console.log(vm,"ddddd") $scope.fromData = "我来自指令数据"; // return vm; } // app.controller("mydemo",["$scope",function($scope){ // $scope.topClick = function(aa){ // alert(aa); // } // $scope.myaddress="广州"; //初始化数据 // }]) </script> </html>
