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://documentcloud.github.io/underscore/underscore-min.js"></script>
<meta name="description" content="directive mock-up" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <link href="http:////cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css
" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.6.0/ui-bootstrap-tpls.min.js">
  </script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-app="dlib" ng-controller="ctrl">
  <!-- undo, status from all enclosed editors (or just the active one) -->
  <edit-manager>
   <tu-iterator enabled="!isDirty" items="accounts" index="idx">
     <select direct-nav></select>
     <button next-button>Next</button>
     <button previous-button>Previous</button>
   </tu-iterator>
   <button save-button>Save</button>
   <button undo-button>Undo</button>
    <div ng-show="isDirty">MODIFIED</div>
    <div ng-show="!isDirty">unmodified</div>
   <tabset>
      <tab heading="Accounts">
        <account-editor dirtyFlag="isDirty" account-id="idx"></account-editor>
      </tab>
      <tab heading="Members">
       <tu-tab-iterator items="members" index="memberidx">
       </tu-tab-iterator>
       <member-editor dirtyFlag="isDirty" member-id="memberidx"></member-editor>  
     </tab>
   </tabset>
  </edit-manager>
  </body>
</html>
 
<form>
   <input ng-model="accountToEdit.name"/>
   <input ng-model="accountToEdit.label"/>
</form>
​
 
console.clear();
​
angular.module('tuAccount', []).
​
service('account', function() {
  return {
    getAccount: function(id) {
      if(id === 0) 
        return { name : 'Tony', label: "Label A" };
      else 
        return { name : 'Simon', label: 'Label B' };
    },
    saveAccount: function(acct) {
      acct.error = "Bad deal!";
      return acct;
    }
  };
});
​
​
angular.module("dlib", ['ui.bootstrap', 'tuAccount' ]).controller('ctrl', [ '$scope', function($scope) {
  $scope.idx = 0;
  $scope.isDirty = false;
  $scope.items = [
    { id: 0, label: "Tony" },
    { id: 1, label: "Simon" }
  ];
  
  $scope.tabs = [ { 
    title: 'a', content: 'a stuff'}, {title: 'b', content: 'b stuff' } ];
}]).
​
directive('tuIterator', function() {
  return {
    scope: {
      items: '=',
      index: '='
    },
    restrict: 'E', 
    require: '?^editManager',
    transclude: true,
    controller: function($scope) {
      this.next = function() {
        if($scope.ctrl.isDirty()) {
          alert("NO!");
          return;
        }
        $scope.$apply(function() {
          $scope.index++;
        });
      };
      this.previous = function() {
        if($scope.ctrl.isDirty()) {
          alert("NO!");
          return;
        }
        $scope.$apply(function() {
          $scope.index--;
        });
      };
    },
    link: function($scope, element, attrs, controller) {
      $scope.ctrl = controller;
      console.log($scope.ctrl);
    },
    template: '<span ng-transclude></span>'
  };
}).
​
directive('previousButton', function() {
  return {
    restrict: 'A',
    scope: {},
    link: function($scope, element, attrs, ctrl) {
      element.bind('click', function() { ctrl.previous(); });
    },
    require: '^tuIterator'
  };
}).
​
directive('nextButton', function() {
  return {
    restrict: 'A',
    scope: {},
    link: function($scope, element, attrs, ctrl) {
      element.bind('click', function() { ctrl.next(); });
    },
    require: '^tuIterator'
  };
}).
​
directive('editManager', function() {
  return {
    restrict: 'E',
    scope: {
    },
    controller: function($scope) {
      $scope.editors = [];
      this.register = function(editor) {
        $scope.editors.push(editor);
      };
      this.save = function() {
        _.each($scope.editors, function(e) {
          e.save();
        });
      };
      this.undo = function() {
        _.each($scope.editors, function(e) {
          e.undo();
        });
      };
    }
  };
}).
​
directive('saveButton', function() {
  return {
    restrict: 'A',
    scope: {},
    require: '^editManager',
    link: function($scope, element, attr, ctrl) {
      element.on('click', function() {
        $scope.$apply(function() {
          ctrl.save();
        });
      });
    }
  };
}).
​
directive('undoButton', function() {
  return {
    restrict: 'A',
    scope: {},
    require: '^editManager',
    link: function($scope, element, attr, ctrl) {
      element.on('click', function() {
        $scope.$apply(function() {
          ctrl.undo();
        });
      });
    }
  };
}).
​
directive('accountEditor',[ 'account', function(account) {
  return {
    restrict: 'E',
    require: '^editManager',
    scope: {
      accountId: '=',
      editController: '=',
      dirtyFlag: '='
    },
    link: function($scope, element, attr, ctrl) {
      ctrl.register({ 
        save: function() {
          $scope.accountToEdit = account.saveAccount($scope.accountToEdit);
        },
        isDirty: function() {
          return true;
        }
      });
      $scope.$watch('accountId', function() {
        $scope.accountToEdit = account.getAccount($scope.accountId);
      });
          
    },
    templateUrl: '/esojUJIB/7.css'
  };
}]);
Output 300px

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

Dismiss x
public
Bin info
awkaypro
0viewers