ng-repeat sur les propriétés de l'objet mais défocalise la zone de saisie après avoir tapé

Je suis en utilisant ng-repeat pour lier les éléments de formulaire pour les propriétés d'un objet personnalisé, j'ai, par exemple:

 $scope.myObject = {
            'font-size': 10,
            'text-outline-width': 2,
            'border-color': 'black',
            'border-width': 3,
            'background-color': 'white',
            'color': '#fff'
    }

HTML:

<div ng-repeat='(key, prop) in myObject'>
    <p>{{key}} : {{prop}}</p>
    <input type='text' ng-model='myObject[key]'>
</div>

Cependant, chaque fois que j'essaie de taper une valeur dans la zone de saisie, la zone de texte obtient désactivée et j'ai sélectionner à nouveau pour continuer à taper.

Est-il une autre façon de faire la liaison bidirectionnelle à un objet, de sorte que je peux taper librement?

Voici le JSFiddle:
http://jsfiddle.net/AQCdv/1/

source d'informationauteur user1027169 | 2013-10-15

  1. 0

    cela peut être résolu avec une directive. J'ai créé une directive appelée customBlur mais elle peut être appelée à tout ce que vous voulez, lui a accordé des matchs dans votre HTML. Afficher le violon ici: http://jsfiddle.net/AQCdv/3/

    angular.module('app', []).directive('customBlur', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elm, attr, ngModelCtrl) {
            if (attr.type === 'radio' || attr.type === 'checkbox') return; //ignore check boxes and radio buttons

            elm.unbind('input').unbind('keydown').unbind('change');
            elm.bind('blur', function() {
                scope.$apply(function() {
                    ngModelCtrl.$setViewValue(elm.val());
                });
            });
        }
    };
});

    et la directive HTML pour être utilisé comme

    <input type='text' ng-model='myObject[key] ' custom-blur>

    Ce que cette directive n'est séparer les événements qui produisent le modèle est mis à jour qui est à l'origine de votre champ de texte à perdre le focus. Maintenant, lorsque le champ de texte perd le focus (flou de l'événement), les modèles sont mis à jour.