zoukankan      html  css  js  c++  java
  • AngularJs 自定义指令

    html代码
    <body ng-app="components"> 
      <h3>BootStrap Tab Component</h3> 
      <tabs> 
        <pane title="First Tab"> 
          <div>This is the content of the first tab.</div> 
        </pane> 
        <pane title="Second Tab"> 
          <div>This is the content of the second tab.</div> 
        </pane> 
      </tabs> 
    </body>
    
    JavaScript代码
    angular.module('components', []). 
      directive('tabs', function() { 
        return { 
          restrict: 'E', 
          transclude: true, 
          scope: {}, 
          controller: [ "$scope", function($scope) { 
            var panes = $scope.panes = []; 
      
            $scope.select = function(pane) { 
              angular.forEach(panes, function(pane) { 
                pane.selected = false; 
              }); 
              pane.selected = true; 
            } 
      
            this.addPane = function(pane) { 
              if (panes.length == 0) $scope.select(pane); 
              panes.push(pane); 
            } 
          }], 
          template: 
            '<div class="tabbable">' + 
              '<ul class="nav nav-tabs">' + 
                '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+ 
                  '<a href="" ng-click="select(pane)">{{pane.title}}</a>' + 
                '</li>' + 
              '</ul>' + 
              '<div class="tab-content" ng-transclude></div>' + 
            '</div>', 
          replace: true 
        }; 
      }). 
      directive('pane', function() { 
        return { 
          require: '^tabs', 
          restrict: 'E', 
          transclude: true, 
          scope: { title: '@' }, 
          link: function(scope, element, attrs, tabsCtrl) { 
            tabsCtrl.addPane(scope); 
          }, 
          template: 
            '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' + 
            '</div>', 
          replace: true 
        }; 
      })
  • 相关阅读:
    文本特殊符号汇集
    十大编程算法助程序员走上高手之路
    单例模式(Singleton)
    flink time and watermark
    关于maven依赖关系的问题
    幂等
    乐观锁和悲观锁的一个例子
    Elasticsearch logstash filter
    ELK filebeat的安装
    使用 Python 验证数据集中的体温是否符合正态分布
  • 原文地址:https://www.cnblogs.com/xiaoxiaosha/p/5639789.html
Copyright © 2011-2022 走看看