天天看點

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>      

運作結果

angular34-自定義指令2