开发者社区云计算文章正文

angular34-自定义指令2

2022-08-09 104

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： angular34-自定义指令2

<!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Document</title>
     </head>
     <body ng-app="myApp1">
         <btn primary="true" lg block></btn>
         <script src="./js/Angular.js"></script>
         <script>
             var myApp1 = angular.module('myApp1', []);
             //第一个参数是指令的名字 第二个参数应该使用一个数组
             //数组的最后一个元素是一个函数
             myApp1.directive('btn', [function() {
                 return {
                     scope: {
                         primary: '@',
                         lg: '@',
                         block: '@'
                     },
                     //指令对象的属性  
                     transclude: true,
                     template: '<button class="btn{{primary?\'btn-primary\':\'\'}}">button</button>'
                 }
             }])
         </script>
     </body>
     </html>