AngularJS et contentEditable les deux sens de la liaison ne fonctionne pas comme prévu

Pourquoi dans l'exemple suivant, la première rendus valeur est {{ person.name }} plutôt que David? Comment voulez-vous résoudre ce problème?

Live exemple ici

HTML:

<body ng-controller="MyCtrl">
  <div contenteditable="true" ng-model="person.name">{{ person.name }}</div>
  <pre ng-bind="person.name"></pre>
</body>

JS:

app.controller('MyCtrl', function($scope) {
  $scope.person = {name: 'David'};
});

app.directive('contenteditable', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ctrl) {
      //view -> model
      element.bind('blur', function() {
        scope.$apply(function() {
          ctrl.$setViewValue(element.html());
        });
      });

      //model -> view
      ctrl.$render = function() {
        element.html(ctrl.$viewValue);
      };

      //load init value from DOM
      ctrl.$setViewValue(element.html());
    }
  };
});
  • J'ai juste emprunté un code similaire à la vôtre pour obtenir ma page de travail (je suis aide contenteditable divs (edit mode). Un problème que j'ai c'est que j'ai un article que je suis en utilisant ng-bind-html-dangereux au lieu de ng-model ... Comment pourrais-je adapter votre code pour travailler dans les deux cas?
  • vous n'avez pas besoin ng-bind-html-dangereux avec ce code, il suffit d'utiliser ng-model.