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>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-app="Foo">
  <p>&nbsp;</p>
  
  <div ng-controller="Page">
    <div ng-repeat="component in components">
      <tabs>
        <pane icon-png="icon-eye-open" mode="view">
          <page-component></page-component>
        </pane>
        <pane icon-png="icon-edit" mode="edit">
          <page-component-form></page-component-form>
        </pane>
      </tabs>
      <p>&nbsp;</p>
    </div>
  </div>
  
  <script type="text/ng-template" id="video.html">
    <p>[video] {{component.title}}</p>
  </script>
  <script type="text/ng-template" id="rich_text.html">
    <p>[rich-text] {{component.title}}</p>
  </script>
  
  <script type="text/ng-template" id="page-component-form.html">
    <div>
      <input type="text" ng-model="component.title" />
      <a class="btn">Save</a>
    </div>
  </script>
  
  <script type="text/ng-template" id="nav-tabs.html">
    <ul class="nav nav-tabs">
      <li ng-repeat="pane in panes" 
        ng-class="{active: pane.selected}">
        <a ng-click="switch_tab(pane)">
          <i class="{{pane.icon}}"></i>
        </a>
      </li>
    </ul>
    <div class="tab-pane" ng-transclude></div>
  </script>
</body>
</html>
​
 
page-component {
  display: none;
}
 
var app = angular.module("Foo", []);
​
app.controller("Page", function($scope) {
  $scope.components = [
    {type: "rich_text", title: "Rich Text"},
    {type: "video", title: "Video"}
  ];
});
​
app.directive("tabs", function($compile) {
  return {
    restrict: "E",
    transclude: true,
    scope: true,
    template: $("#nav-tabs\\.html").html(),
    controller: function($scope, $element) {
      var panes = $scope.panes = [];
      
      $scope.switch_tab = function(pane) {
        console.log("switch tab");
        console.log(pane.mode);
        
        $scope.select(pane);
      };
      
      $scope.select = function(pane) {
        angular.forEach(panes, function(pane) {
          pane.selected = false;
        });
        pane.selected = true;
      };
      
      this.add_panes = function(pane) {
        if (panes.length === 0) $scope.select(pane);
        panes.push(pane);
      };
    },
    link: function(scope, element, attrs) {
      console.log("linking tabs");
    }
  };
});
​
app.directive("pane", function($compile) {
  return {
    restrict: "E",
    transclude: true,
    require: "^tabs",
    scope: {icon: "@iconPng", mode: "@"},
    template: "<div ng-transclude ng-show='selected'></div>",
    link: function(scope, element, attrs, tabsCtrl) {
      tabsCtrl.add_panes(scope);
    },
    replace: true
  };
});
​
app.directive("pageComponent", function($compile) {
  var template_for = function(type) {
    return type+"\\.html";
  };
  
  return {
    restrict: "E",
    // transclude: true,
    scope: true,
    compile: function(element, attrs) {
      return function(scope, element, attrs) {
        var tmpl = template_for(scope.component.type);
        element.html($("#"+tmpl).html()).show();
        $compile(element.contents())(scope);
      };
    }
  };
});
​
app.directive("pageComponentForm", function($compile) {
  return {
    restrict: "E",
    template: $("#page-component-form\\.html").html()
  };
});
Output

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

Dismiss x
public
Bin info
kwonpro
0viewers