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 ng-app="app" ng-controller="AppCtrl as base">
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <!-- Base styles -->
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.4.3/ng-table.css">
  <!-- Base styles -->
  
  <!-- Base scripts (libraries) -->
  <script src="//code.jquery.com/jquery.min.js"></script>
  
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-sanitize.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-cookies.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-resource.min.js"></script>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.4.3/ng-table.js"></script>
  <!-- Base scripts -->
  
</head>
<body>
  <nav class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">JS Bin</a>
      </div>
    </div>
  </nav>
    
  <div class="container" ng-cloak>
    <div class="row">
      <div class="col-xs-12">
        <form name="form" role="form">
          <div class="form-group">
            <label for="field">Field</label>
            <input type="text" class="form-control" id="field" placeholder="Field" name="field" />
          </div>
          
          <div class="form-group">
            <app-component></app-component>
          </div>
          
          <div class="form-group">
            <parent-directive></parent-directive>
          </div>
        </form>
      </div>
    </div>
  </div>
  
  <script type="text/ng-template" id="parent_directive.html">
    <div class="highlight">
      <div class="change-button">
        <!-- <button ng-click="$ctrl.changeState()" class="btn btn-sm btn-info" parent-directive-button-handler>Change</button> -->
        
        <button ng-click="$ctrl.changeState()" class="btn btn-sm btn-info">Change</button>
      </div>
      
      <child-directive state="$ctrl.state"></child-directive>
      <another-child-directive></another-child-directive>
    <div>
  </script>
</body>
</html>
 
div.highlight {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid transparent;
  border-color: #faebcc;
  border-radius: 4px;
  background-color: #fcf8e3;
}
​
div.change-button {
  margin-bottom: 10px;
}
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers