Angualr中自定义指令模板

最新推荐文章于 2022-04-03 22:24:55 发布

强哥blog

最新推荐文章于 2022-04-03 22:24:55 发布

阅读量282

点赞数

分类专栏： Angularjs 文章标签： angular 指令指令模板

本文链接：https://blog.csdn.net/qq_36263601/article/details/76980500

版权

Angularjs 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
</head>

<body ng-app="demoApp">
  <!-- <btn>itcast</btn> -->
  <div breadcrumb></div>
  <breadcrumb data=""></breadcrumb>
  <script src="bower_components/angular/angular.js"></script>
  <script>
    var demoApp = angular.module('demoApp', []);


    demoApp.directive('breadcrumb', [function() {
      // Runs during compile
      return {
        // 指定当前指令的类型什么样的
        // restrict: 'EA',
        // // E = Element, A = Attribute, C = Class, M = Comment
        // template: '', // 模版字符串
        templateUrl: 'tmpls/breadcrumb.html',
        replace: true,
        // transclude: true,
      };
    }]);

    // demoApp.directive('btn', [function() {
    //   return{
    //     scope:{
    //       primary:'@',
    //       lg:'@',
    //       block:'@',
    //     },
    //     template:'<button class="btn {{primary==\'true\'?\'btn-primary\':\'\'}}">button</button>'
    //   }
    // }]);

    // demoApp.directive('btn', [function() {
    //   return {
    //     // 指令对象的transclude必须设置为true才可以在模版中使用ng-transclude指令
    //     transclude: true,
    //     replace: true, // 替换指令在HTML中绑定的元素
    //     template: '<button class="btn btn-primary btn-lg" ng-transclude></button>'
    //   };
    // }]);
  </script>
</body>

</html>