html5 - Strange angular data binding in contenteditable element -
html5 - Strange angular data binding in contenteditable element -
with markup:
<body ng-app="app" ng-controller="ctrl"> <h1>type below in 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> and little bit js:
var app = angular.module('app', []); app.controller('ctrl', function($scope) { $scope.obj1 = { content: '' }; $scope.obj2 = { content: '' }; }); app.directive('contenteditable', function() { homecoming { scope: { obj: '=' }, restrict: 'a', link: function(scope, elem) { elem.on('keyup', function() { var text = elem.text(); scope.obj.content = text; scope.$apply(); }); } }; }); i trying write contenteditable directive 2 way info binding. unusual things happen:
using ngbind: type 'a', caret jumps first position instead of after 'a';
using interpolation: type 'a', become 'aa'.
the live demo: http://jsbin.com/bifabuyu/5/edit
what happening here , how prepare it?
i prepare problem interpolation - delete {{obj2.content}} from
<div class="editable" contenteditable=true obj="obj2">{{obj2.content}}</div> and work correctly. "doubling" symbols happens because directive bind "obj2", , within directive print object "obj2".
html5 angularjs contenteditable
Comments
Post a Comment