Sharing Top Content from the Angular-sphere.

[SOLVED] AngularJS and contentEditable two way binding doesn’t work as expected- Angular.js Recipes

  • app.controller(‘MyCtrl’, function($scope) { $scope.person = {name: ‘David’}; }); function() { return { require: ‘ngModel’, link: function(scope, element, attrs, ctrl) { // view -> model element.bind(‘blur’, function() { scope.
  • $apply(read); }); read(); // initialize // Write data to the model function read() { var html = element.html(); // When we clear the content editable the browser leaves a
    behind // If strip-br attribute is provided then we strip this out if( attrs.stripBr && html == ‘
    ‘ ) { html = ”; } ngModel.
  • $apply to update View Model with a function as an // argument that takes Value from the Html Page and update it on View Model element.on(“keyup blur change”, function () { scope.
  • Function gets the current value in the View Model // with $viewValue property of Model Controller and I used element text method // to update the Html just as we do in normal jQuery.
  • $render = function() { || ”); }; // Listen for change events to enable binding element.on(‘blur keyup change’, function() { $timeout(read); }); read(); // initialize // Write data to the model function read() { var html = element.html(); // When we clear the content editable the browser leaves a
    behind // If strip-br attribute is provided then we strip this out if( attrs.stripBr && html == ‘
    ‘ ) { html = ”; } ngModel.

The problem is that you are updating the view value when the interpolation is not finished yet.

So removing

// load init value from DOM
ctrl.$setViewValue(element.html());

or replacing it with

ctrl.$render();

will resolve the issue.


@angular_recipe: AngularJS and contentEditable two way binding doesn’t work as expected #Angular #AngularJS

You’re initializing the model from the DOM using this line:

ctrl.$setViewValue(element.html());

You obviously don’t need to initialize it from the DOM, since you’re setting the value in the controller. Just remove this initialization line.

Change me!

Required!


angular.module(‘customControl’, []). directive(‘contenteditable’, function() { return { restrict: ‘A’, // only activate on element attribute require: ‘?ngModel’, // get a hold of NgModelController link: function(scope, element, attrs, ngModel) { if(!ngModel) return; // do nothing if no ng-model // Specify how UI should be updated ngModel.$render = function() { element.html(ngModel.$viewValue || ”); }; // Listen for change events to enable binding element.on(‘blur keyup change’, function() { scope.$apply(read); }); read(); // initialize // Write data to the model function read() { var html = element.html(); // When we clear the content editable the browser leaves a
behind // If strip-br attribute is provided then we strip this out if( attrs.stripBr && html == ‘
‘ ) { html = ”; } ngModel.$setViewValue(html); } } }; });

you can see it working here as well.


Hope, it helps someone out there.!!

Change me!

Required!


angular.module(‘customControl’, []). directive(‘contenteditable’, function($timeout) { return { restrict: ‘A’, // only activate on element attribute require: ‘?ngModel’, // get a hold of NgModelController link: function(scope, element, attrs, ngModel) { if(!ngModel) return; // do nothing if no ng-model // Specify how UI should be updated ngModel.$render = function() { element.html(ngModel.$viewValue || ”); }; // Listen for change events to enable binding element.on(‘blur keyup change’, function() { $timeout(read); }); read(); // initialize // Write data to the model function read() { var html = element.html(); // When we clear the content editable the browser leaves a
behind // If strip-br attribute is provided then we strip this out if( attrs.stripBr && html == ‘
‘ ) { html = ”; } ngModel.$setViewValue(html); } } }; });

Angular.js Recipes are structured in a Cookbook format featuring recipes that contain problem statements and solutions. A detailed explanation follows each problem statement of the recipe. This is usually contained within the solution; however, an optional discussion section can often contain other useful information helping to demonstrate how the solution works.

Angular.js is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. The JavaScript components complement Apache Cordova, the framework used for developing cross-platform mobile apps. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.

Lost? Begin by working through Angular’s Getting Started Guide to get yourself up-and-running.

[SOLVED] AngularJS and contentEditable two way binding doesn’t work as expected- Angular.js Recipes

Comments are closed, but trackbacks and pingbacks are open.