Pourquoi est-ngModel.$setViewValue(...) pas de

Je suis en train d'écrire une directive qui a besoin d'un cas isolé, mais je veux le lier à la portée parent via ngModel.

Ici, le problème est que les parents de la portée de la valeur n'est pas modifiée.

Balisage

<form name="myForm" ng-app="customControl">
    <div ng-init="form.userContent"></div>
    <div contenteditable name="myWidget" ng-model="form.userContent" required>Change me!</div>
    <span ng-show="myForm.myWidget.$error.required">Required!</span>
    <hr />
    <textarea ng-model="form.userContent"></textarea>
</form>

angular.module('customControl', []).directive('contenteditable', function() {
    return {
        restrict : 'A', //only activate on element attribute
        require : '?ngModel', //get a hold of NgModelController
        scope: {},
        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.bind('blur keyup change', function() {
                        scope.$apply(read);
                    });
            read(); //initialize

            //Write data to the model
            function read() {
                ngModel.$setViewValue(element.html());
            }
        }
    };
});

Démo: Violon.

Cela fonctionne bien si je n'utilise pas un isolé champ d'application de la directive

Démo: Violon.

Ne devrait pas element.html(ngModel.$viewValue...)be element.html($sce.getTrustedHtml(ngModel.$viewValue)..) " je sais que c'est presque exactement la même que dans le ng docs exemple, mais je viens de découvrir cette contourne la protection xss autrement.
Pouvez-vous expliquer pourquoi l'isoler de la portée de faire, il ne fonctionne pas?
Re @cirrus commentaire, il me semble que pour éviter les attaques de type XSS, que chaque fois que quelque chose est placé dans l'élément qu'il devrait d'abord être désinfectés à l'aide d' $désinfecter (c'est à dire ne pas faire confiance à l'HTML). Quelque chose comme element.html($désinfecter(ngModel.$viewValue))`.

InformationsquelleAutor Arun P Johny | 2013-03-07

43

La raison en est que, puisque vous êtes en train de créer un isolé étendue pour votre contenteditable directive, la ng-model la directive sur le même élément est que les isolés de la portée de l'. Ce qui signifie que vous avez deux portées différentes qui ne sont pas connectés les uns aux autres, qui ont tous deux un form.userContent bien que les modifications séparément. Je pense que l'on peut illustrer par le présent code:
```
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.angularjs.org/1.0.5/angular.min.js"></script>
<script>
angular.module('myApp', []).controller('Ctrl', function($scope) {
})
.directive('contenteditable', function() {
return {
restrict : 'A', //only activate on element attribute
require : '?ngModel', //get a hold of NgModelController
scope: {},
link : function(scope, element, attrs, ngModel) {
if (!ngModel)
return; //do nothing if no ng-model
setInterval(function() {
if (angular.element('#contenteditable').scope().form)
console.log(angular.element('#contenteditable').scope().form.userContent);
if (angular.element('#textarea').scope().form)
console.log(angular.element('#textarea').scope().form.userContent);
}, 1000);
//Specify how UI should be updated
ngModel.$render = function() {
element.html(ngModel.$viewValue || '');
};
//Listen for change events to enable binding
element.bind('blur keyup change', function() {
scope.$apply(read);
});
read(); //initialize
//Write data to the model
function read() {
ngModel.$setViewValue(element.html());
}
}
};
});
</script>
</head>
<body ng-controller="Ctrl">
<form name="myForm">
<div ng-init="form.userContent"></div>
<div contenteditable name="myWidget" ng-model="form.userContent" id="contenteditable" required>Change me!</div>
<span ng-show="myForm.myWidget.$error.required">Required!</span>
<hr />
<textarea ng-model="form.userContent" id="textarea"></textarea>
</form>
</body>
</html>
```
Comme vous le verrez dans votre console, il y a deux portées différentes et form.userContent sur modifier séparément si vous modifiez le texte dans le textarea ou si vous modifiez le texte dans votre contenteditable div.

Donc, je parie que vous êtes en train de penser "assez avec l'expliquer et me montrer une solution!". Eh bien, il n'y a pas (à ma connaissance) une jolie solution pour ce faire, mais il y en a un qui fonctionne. Ce que vous voulez faire est de mettre une référence du modèle de votre isolé portée, et assurez-vous qu'il a le même nom dans votre isolé portée qu'à la portée parent.

Voici ce que vous faites, au lieu de créer un vide portée comme ceci:
```
...
scope: {}
...
```
Vous lier le modèle comme ceci:
```
...
scope: {
model: '=ngModel'
}
....
```
Maintenant, vous avez un model bien sur votre isolé étendue qui est une référence à form.userContent sur votre parent. Mais ng-model n'est pas à la recherche d'un model propriété, c'est la recherche d'un form.userProperty qui n'existent pas dans notre isolé portée. Donc pour remédier à cela, nous ajoutons ceci à l'intérieur de notre fonction de liaison:
```
scope.$watch('model', function() {
scope.$eval(attrs.ngModel + ' = model');
});
scope.$watch(attrs.ngModel, function(val) {
scope.model = val;
});
```
La première montre se synchronise les modifications sur form.userContent qui vient de l'extérieur de notre directive de notre isolé form.userContent, et la seconde montre fait en sorte que nous propager les modifications sur notre isolé form.userContent jusqu'à la portée parent.

Je me rends compte que c'est une longue réponse, et peut-être pas très facile à suivre. Je serais heureux de clearify tout ce qui vous vous sentez est flou.
- Quand vous dites "[...] ng-modèle de la directive sur le même élément est que les isolés de la portée de l'. Ce qui signifie que vous avez deux portées différentes qui ne sont pas connectés les uns aux autres", si le même isolé champ d'application est partagée par les deux ng-model et contenteditable, comment venir vous dire qu'ils ont deux portées différentes? Il ressemble à une contradiction. Ou ai-je raté quelque chose?
- Je ne suis pas clair comment l'isoler portée casser le code. Pouvez-vous préciser?
- Anders Ekdahl Si plusieurs directives sur un élément de fournir un isolat portée, seulement un nouveau champ est appliqué.(référence Ng-Livre ,page 111 ,Portée Intitulé de l'Option)
InformationsquelleAutor Anders Ekdahl
4

la première réponse explique le problème, je crois que j'ai une solution plus simple qui évite supplémentaire montres.

pour résumer la réponse 1. ngModel ne peuvent pas travailler à l'intérieur de l'isoler de la portée, car les éléments que vous avez prévu pour le lier à ne sont pas dans son champ d'application. ils sont dans la portée parent.

solution de 1, se lient à la mère de propriété
```
<div contenteditable name="myWidget" ng-model="form.userContent" required>Change me!</div>
```
devient
```
<div contenteditable name="myWidget" ng-model="$parent.form.userContent" required>Change me!</div>
```
solution 2, déplacer ngModel à l'extérieur de l'isoler de la portée

require : '?ngModel', devient require : '?^ngModel', l' ^ dit que votre directive regarder dans les éléments de parent pour ngModel
```
<div contenteditable name="myWidget" ng-model="form.userContent" required>Change me!</div>
```
devient
```
<div ng-model="form.userContent">
<div contenteditable name="myWidget" required>Change me!</div>
</div>
```
- J'ai trouvé cette réponse pour être au point et la plus utile. Vous pourriez vouloir pour compléter la réponse à la double$approche montre qu'il est légitime (et largement appliquée) solution.
InformationsquelleAutor FreakinaBox

-1

Je ne suis pas sûr si cela fonctionne pour vous. Cependant, vous pouvez lui donner un essai.

html:

<form name="myForm" ng-app="customControl">
<div ng-init="form.userContent"></div>
<div contenteditable name="myWidget" ng-model="form" required>Change me!</div>
<span ng-show="myForm.myWidget.$error.required">Required!</span>
<hr />
<textarea ng-model="form.content"></textarea>
</form>

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.bind('blur keyup change', function() {
scope.$apply(read);
});
read(); //initialize
//Write data to the model
function read() {
ngModel.$setViewValue({'content': element.html()});
}
}
};
});

InformationsquelleAutor Xuan.Zhu

Vous devez vous connecter pour publier un commentaire.