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="bugIsolation">
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
  <script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>
</head>
<body ng-controller="BodyCtrl as body">
  <a ui-sref="stateOne" href="#">Go to stateOne</a>
  <a ui-sref="stateTwo" href="#">Go to stateTwo</a>
  
  <div ui-view></div>
​
  <script type="text/ng-template" id="stateOne.html">
    This state is empty.
  </script>
  
  <script type="text/ng-template" id="stateTwo.html">
    <bar></bar>
  </script>
  
  <script type="text/ng-template" id="bar.html">
    <foo>
      <div ng-controller="TargetCtrl as target">
        HELLO
      </div>
    </foo>
  </script>
</body>
</html>
 
(function (angular) {
  
  angular.module('bugIsolation', ['ui.router']);
  
  function routeApp($stateProvider) {
    $stateProvider
      .state('stateOne', {
        templateUrl: 'stateOne.html',
        controller: 'StateCtrl',
        controllerAs: 'state'
      })
      .state('stateTwo', {
        templateUrl: 'stateTwo.html',
        controller: 'StateCtrl',
        controllerAs: 'state'
      });
  }
  
  function BodyCtrl() {}
  
  function StateCtrl($scope, $state) {
    var vm = this;
    
    this.currentState = $state.current.name;
    
    console.log(
      this.currentState +
      ' controller instantiated by: ' +
      $scope.$id
    );
    
    
    $scope.$on('$destroy', function () {
      console.log(
        vm.currentState + ' ctrl destroyed.'
      );
    });
  }
  
  function TargetCtrl($scope) {
    console.log(
      'TargetCtrl instantiated by: ' + $scope.$id);
    $scope.$on('$destroy', function ($event) {
      console.log(
        'TargetCtrl being destroyed by: ' +
        $event.targetScope.$id
      );
    });
  }
  
  // think of this as searchBar
  function barDirective() {
    return {
      restrict: 'E',
      scope: {},
      templateUrl: 'bar.html',
      link: function (scope) {
        scope.$on('$destroy', function () {
          console.log('bar link fn being destroyed');
        });
      }
    };
  }
 
  
  // think of this as panel
  function fooDirective() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      template: '<div ng-transclude></div>',
      link: function (scope) {
        scope.$on('$destroy', function () {
          console.log(
            'foo link fn scope is being destroyed'
          );
        });
      }
    };
  }
  
  angular.module('bugIsolation')
    .config(routeApp)
    .controller('BodyCtrl', BodyCtrl)
    .controller('StateCtrl', StateCtrl)
    .controller('TargetCtrl', TargetCtrl)
    .directive('bar', barDirective)
    .directive('foo', fooDirective);
​
})(angular);
Output 300px

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

Dismiss x
public
Bin info
wylieconlonpro
0viewers