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?
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.
Vous devez vous connecter pour publier un commentaire.
Le problème, c'est que vous êtes la mise à jour de l'affichage de la valeur lors de l'interpolation n'est pas encore terminée.
Donc supprimer
ou de la remplacer par
va résoudre le problème.
Réponse courte
Vous êtes à l'initialisation du modèle de la DOM à l'aide de cette ligne:
Manifestement, vous n'avez pas besoin de l'initialiser à partir du DOM, puisque vous êtes à la définition de la valeur dans le contrôleur. Tout simplement supprimer cette initialisation ligne.
Réponse longue (et probablement pour l'autre question)
C'est en fait un problème connu: https://github.com/angular/angular.js/issues/528
Voir un officiel docs exemple ici
Html:
JavaScript:
Plunkr
Voici ma compréhension de la Coutume directives.
Le code ci-dessous est aperçu de base de la liaison bidirectionnelle.
vous pouvez le constater ici.
http://plnkr.co/edit/8dhZw5W1JyPFUiY7sXjo
De l'espoir, il aide quelqu'un là-bas.!!
Cochez cette directive angularjs
https://github.com/clofus/angular-inputnlabel
http://clofus.com/viewarticles/109
Vous risquez de rencontrer des problèmes à l'aide de @Vanaun code si un champ.$appliquer est déjà en cours. Dans ce cas, j'utilise $timeout à la place qui résout le problème:
Html:
JavaScript:
De Travail Exemple: Plunkr