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>
 
angular.module('app', [])
  .controller('AppCtrl', function($scope) {
    
  });
​
angular.module('app')
  .service('AppService', function() {
  
  });
​
angular.module('app')
  .factory('AppFactory', function() {
    return {
      
    };
  });
​
angular.module('app')
  .directive('appDirective', function() {
    return {
      restrict: 'A'
    };
  });
​
angular.module('app')
  .component('appComponent', {
    template: '<div>{{$ctrl.text}}</div>',
    controller: function() {
      this.text = 'Component is located here!';
    }
  });
​
angular.module('app')
  .filter('appFilter', function() {
    return function(input) {
      return input;
    };
  });
​
angular.module('app')
  .component('parentDirective', {
      templateUrl: 'parent_directive.html',
      controller: function($timeout) {
        var ctrl = this;
        this.state = true;
        
        this.changeState = function() {
          ctrl.state = !ctrl.state;  
        }.bind(this);
      }
    });
​
angular.module('app')
  .directive('parentDirectiveButtonHandler', function($timeout) {
    return {
      restrict: 'A',
      scope: {},
      link: function(scope, iElement, iAttrs) {
        $timeout(function() {
          iElement.trigger('click');
        });
      }
    };
  });
​
angular.module('app')
  .component('childDirective', {
    bindings: {
      state: '<'
    },
    template: '{{$ctrl.text}} {{$ctrl.changeState}}!<br />',
    controller: function() {
      var ctrl = this;
      updateState();
      
      this.$onChanges = function() {
        updateState();
      };
      
      function updateState() {
        ctrl.text = '' + ctrl.state;
        ctrl.changeState = Date.now();
      }
    }
  });
​
angular.module('app')
  .directive('anotherChildDirective', function() {
    return {
      restrict: 'E',
      scope: {},
      template: '{{text}} {{changeState}}!<br />',
      controller: function($scope) {
        $scope.changeState = 'unchanged';
        $scope.text = 'Another child directive';
        
        $scope.$on('SOME_EVENT_NAME', function() {
          $scope.changeState = 'changed';
        });
      }
    };
  });
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers