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.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="app" ng-controller="ctrl">
  <h1>Type below in the editable div</h1>
  <h3>Use ng-bind:</3>
  <div class="editable" contenteditable=true obj="obj1" ng-bind="obj1.content"></div>
  <h3>Content:</h3>
  <div>{{obj1.content}}</div>
  
  <h3>Use interpolation</h3>
  <div class="editable" contenteditable=true obj="obj2">{{obj2.content}}</div>
  <h3>Content:</h3>
  <div>{{obj2.content}}</div>
</body>
</html>
 
var app = angular.module('app', []);
​
app.controller('ctrl', function($scope) {
  $scope.obj1 = {
    content: ''
  };
  $scope.obj2 = {
    content: ''
  };
});
​
app.directive('contenteditable', function() {
  return {
    scope: {
      obj: '='
    },
    restrict: 'A',
    link: function(scope, elem) {
        elem.on('keyup', function() {
          var text = elem.text();
            scope.obj.content = text;
            scope.$apply();
        });
     }
  };
});
Output

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

Dismiss x
public
Bin info
tiaozi0912pro
0viewers