AngularJs 自定义指令

Posted 潇潇杀

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 
    }; 
  })

 

以上是关于AngularJs 自定义指令的主要内容，如果未能解决你的问题，请参考以下文章

将 keydown 事件定位到 angularJS 自定义指令

angularjs自定义指令实现分页插件

使用 AngularJS 自定义指令启动 jQuery 函数

angularJS自定义过滤器服务和指令

AngularJS 自定义服务指令

AngularJs 自定义指令