angular的scopel指令运用详解
我们来创立一个自定义指令
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .primary{ background: red; } </style></head><body ng-app="myApp"> <div ng-controller="mainCtrl"> <my-btn></my-btn> </div> <script src="node_modules/angular/angular.min.js"></script> <script> var myApp = angular.module('myApp',[]); myApp.controller('mainCtrl',['$scope',function($scope){ $scope.myClass = 'primary'; }]); myApp.directive('myBtn',function(){ return { template:'<input type="button" value="按钮" class="{{myClass}}">' } }); </script></body></html>
使用自定义指令像上面一样确实不错,但是假如你想要对每一个指令渲染出来的按钮定制化,则仿佛不成以,比方下面我们创立一堆这个自定义指令,他们长得千篇一律:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .primary{ background: red; } </style></head><body ng-app="myApp"> <div ng-controller="mainCtrl"> <my-btn></my-btn> <my-btn></my-btn> <my-btn></my-btn> <my-btn></my-btn> </div> <script src="node_modules/angular/angular.min.js"></script> <script> var myApp = angular.module('myApp',[]); myApp.controller('mainCtrl',['$scope',function($scope){ $scope.myClass = 'primary'; }]); myApp.directive('myBtn',function(){ return { template:'<input type="button" value="按钮" class="{{myClass}}">' } }); </script></body></html>
一种思绪是把这几个自定义的指令按钮放到不一样的操纵器里面,然后操纵器里通过$scope上下文传递不一样的值:
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style> .primary{ background: red; } .success{ background: green; } .default{ background: gray; } </style></head><body ng-app="myApp"> <div ng-controller="aCtrl"> <my-btn></my-btn> </div> <div ng-controller="bCtrl"> <my-btn></my-btn> </div> <div ng-controller="cCtrl"> <my-btn></my-btn> </div> <script src="node_modules/angular/angular.min.js"></script> <script> var myApp = angular.module('myApp',[]); myApp.controller('aCtrl',['$scope',function($scope){ $scope.myClass = 'primary'; }]); myApp.controller('bCtrl',['$scope',function($scope){ $scope.myClass = 'success'; }]); myApp.controller('cCtrl',['$scope',function($scope){ $scope.myClass = 'default'; }]); myApp.directive('myBtn',function(){ return { template:'<input type="button" value="按钮" class="{{myClass}}">' } }); </script></body></html>
这样写太费事了,所以我们的angular为我们的自定义指令供给了一个配置项叫scope,所以,我们可以如下这样写:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .primary{ background: red; } .success{ background: green; } .default{ background: gray; } </style></head><body ng-app="myApp"> <div ng-controller="Controller"> <my-btn b="className1"></my-btn> <my-btn b="className2"></my-btn> <my-btn b="className3"></my-btn> </div> <script src="node_modules/angular/angular.min.js"></script> <script> var myApp = angular.module('myApp',[]); myApp .controller('Controller', ['$scope', function($scope) { $scope.className1 = 'primary'; $scope.className2 = 'success'; $scope.className3 = 'default'; }]) .directive('myBtn',function(){ return { scope:{ a:'=b' }, template:'<input type="button" value="按钮" class="{{a}}">' } }); </script></body></html>
要看懂上面的只要留意两点:
这里的独立作用域里面的a代表的是template里面的模型a
=b代表的是要angular去寻觅视图里面的当前指令的属性b
属性b的值需要去外部作用域里面去寻觅
假如你想在指令作用域里绑定的模型的名字和外部使用的时候的属性名一样,可以省写成如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .primary{ background: red; } .success{ background: green; } .default{ background: gray; } </style></head><body ng-app="myApp"> <div ng-controller="Controller"> <my-btn a="className1"></my-btn> <my-btn a="className2"></my-btn> <my-btn a="className3"></my-btn> </div> <script src="node_modules/angular/angular.min.js"></script> <script> var myApp = angular.module('myApp',[]); myApp .controller('Controller', ['$scope', function($scope) { $scope.className1 = 'primary'; $scope.className2 = 'success'; $scope.className3 = 'default'; }]) .directive('myBtn',function(){ return { scope:{ a:'=' }, template:'<input type="button" value="按钮" class="{{a}}">' } }); </script></body></html>
当然,上面的=号是双向数据绑定:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .primary{ background: red; } .success{ background: green; } .default{ background: gray; } </style></head><body ng-app="myApp"> <div ng-controller="Controller"> <my-btn a="abc"></my-btn> </div> <script src="node_modules/angular/angular.min.js"></script> <script> var myApp = angular.module('myApp',[]); myApp .controller('Controller', ['$scope', function($scope) { $scope.abc = '我是初始内容'; }]) .directive('myBtn',function(){ return { scope:{ a:'=' }, template:'<input type="text" ng-model="a"><span>{{a}}</span>' } }); </script></body></html>
假如只是想单向的数据通讯,可以用@符号:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .primary{ background: red; } .success{ background: red; } .default{ background: red; } </style></head><body ng-app="myApp"> <div ng-controller="Controller"> <my-btn a="primary"></my-btn> </div> <script src="node_modules/angular/angular.min.js"></script> <script> var myApp = angular.module('myApp',[]); myApp .controller('Controller', ['$scope', function($scope) { $scope.mm = 'primary'; }]) .directive('myBtn',function(){ return { scope:{ a:'@' }, template:'<input type="button" value="按钮" class="{{a}}">' } }); </script></body></html>
假如想用ng-class,也是可以的:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .primary{ background: red; } .success{ background: red; } .default{ background: red; } </style></head><body ng-app="myApp"> <div ng-controller="Controller"> <my-btn a="primary"></my-btn> </div> <script src="node_modules/angular/angular.min.js"></script> <script> var myApp = angular.module('myApp',[]); myApp .controller('Controller', ['$scope', function($scope) { $scope.mm = true; }]) .directive('myBtn',function(){ return { scope:{ a:'@' }, template:'<input type="button" value="按钮" ng-class="{primary:a}">' } }); </script></body></html>
最后,还有一个scope可以设定是援用外部作用域的办法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .primary{ background: red; } .success{ background: red; } .default{ background: red; } </style></head><body ng-app="myApp"> <div ng-controller="Controller"> <my-btn fn2="fn()"></my-btn> </div> <script src="node_modules/angular/angular.min.js"></script> <script> var myApp = angular.module('myApp',[]); myApp .controller('Controller', ['$scope', function($scope) { $scope.fn = function(){ alert(11); } }]) .directive('myBtn',function(){ return { scope:{ fn1:'&fn2' }, template:'<input type="button" value="按钮" ng-click="fn1()">' } }); </script></body></html>
信赖看了本案牍例你已经把握了办法,更多出色请关注百分百源码网其它相关文章!
引荐阅读:
Angular Material的使用详解
css中id选中器的命名规则是什么
让元素水平垂直居中冷门办法
以上就是angular的scopel指令使用详解的具体内容,更多请关注百分百源码网其它相关文章!