angular的scopel指令使用详解

2024-01-17 15:07 小编

　　我们来创建一个自定义指令　　　　<!DOCTYPEhtml><htmllang="en"><head> 　　<metacharset="UTF-8"> 　　<title>Document</title> 　　<style> 　　.primary{background:red; 　　}</style></head><bodyng-app="myApp"> 　　<divng-controller="mainCtrl"> 　　<my-btn></my-btn> 　　</div> 　　<scriptsrc="node_modules/angular/angular.min.js"></script> 　　<script> 　　varmyApp=angular.module('myApp',[]); 　　myApp.controller('mainCtrl',['$scope',function($scope){ 　　$scope.myClass='primary'; 　　}]); 　　myApp.directive('myBtn',function(){return{ 　　template:'<inputtype="button"value="按钮"class="{{myClass}}">' 　　} 　　});</script></body></html> 　　1.png 　　

使用自定义指令像上面一样的确不错，但是如果你想要对每一个指令渲染出来的按钮定制化，则好像不可以，比如下面我们创建一堆这个自定义指令，他们长得一模一样：　　　　

<!DOCTYPEhtml><htmllang="en"><head> 　　<metacharset="UTF-8"> 　　<title>Document</title> 　　<style> 　　.primary{background:red; 　　}</style></head><bodyng-app="myApp"> 　　<divng-controller="mainCtrl"> 　　<my-btn></my-btn> 　　<my-btn></my-btn> 　　<my-btn></my-btn> 　　<my-btn></my-btn> 　　</div> 　　<scriptsrc="node_modules/angular/angular.min.js"></script> 　　<script> 　　varmyApp=angular.module('myApp',[]); 　　myApp.controller('mainCtrl',['$scope',function($scope){ 　　$scope.myClass='primary'; 　　}]); 　　myApp.directive('myBtn',function(){return{ 　　template:'<inputtype="button"value="按钮"class="{{myClass}}">' 　　} 　　});</script></body></html>

返回首页上一篇：Angular Material的使用详解下一篇：网页的布局方式与浮动