Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
​
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.js"></script>
</head>
<body>
<div ng-app="app">
​
  <script type="text/ng-template" id="tabs.html">
    <div class="tabbable">
      <ul class="nav nav-tabs">
        <li ng-repeat="pane in tabs.panes" ng-class="{active:pane.selected}">
          <a href="" ng-click="tabs.select(pane)">{{pane.title}}</a>
        </li>
      </ul>
      <div class="tab-content" ng-transclude></div>
    </div>
  </script>
​
  <script type="text/ng-template" id="pane.html">
    <div class="tab-pane" ng-class="{active: pane.selected}" ng-transclude>
    </div>
  </script>
​
​
  <tabs>
    <pane title="Localization">
      Date: {{ '2012-04-01' | date:'fullDate' }} <br>
      Currency: {{ 123456 | currency }} <br>
      Number: {{ 98765.4321 | number }} <br>
    </pane>
    <pane title="Pluralization">
      Some other stuff
    </pane>
    <pane title="Third">
      whee
    </pane>
    <pane title="Fourth">
      okay
    </pane>
  </tabs>
​
​
</div>
​
​
​
</body>
</html>
 
    angular.module('app', [])
​
        .directive('tabs', function () {
          return {
            transclude: true,
            scope: {},
            templateUrl: 'tabs.html',
            bindToController: true,
            controller: "TabsController as tabs"
          };
        })
​
        .controller('TabsController', function TabsController() {
          var tabs = this;
          tabs.panes = [];
​
          tabs.select = function (pane) {
            angular.forEach(tabs.panes, function (pane) {
              pane.selected = false;
            });
            pane.selected = true;
          }
​
          tabs.addPane = function (pane) {
            if (tabs.panes.length == 0) tabs.select(pane);
            tabs.panes.push(pane);
          }
        })
​
        .directive('pane', function () {
          return {
            transclude: true,
            scope: {
              title: '@'
            },
            templateUrl: 'pane.html',
            bindToController: true,
            controller: 'PaneController as pane',
            // "replace:true" is deprecated https://docs.angularjs.org/api/ng/service/$compile
            // but it breaks the example :/
            replace: true
            //I'm trying to remove the "require:'^tabs' so I don't
            // have to pass the ctrl into a linking function"
          };
        })
​
        .controller("PaneController", function PaneController($element) {
          var pane = this;
          pane.selected = false;
​
          //I feel like I need a 'resolve' on directives so I
          //can pass whatever I want into directive controllers
          var tabs = $element.controller('tabs');
          tabs.addPane(pane);
        })
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
eggheadiopro
0viewers