Comment Regarder la Directive la Directive ng-model
J'ai une directive qui utilise le parent de ce point de vue. Cette directive a un enfant directive qui utilise un isolé portée. Je suis en train d'essayer d'obtenir le parent directive de regarder toutes les modifications apportées à la ngModel de l'enfant de la directive et de mettre à jour son propre modale si des modifications ont été apportées. Voici un jsfiddle ce qui explique probablement mieux: http://jsfiddle.net/Alien_time/CnDKN/
Voici le code:
<div ng-app="app">
<div ng-controller="MyController">
<form name="someForm">
<div this-directive ng-model="theModel"></div>
</form>
</div>
</div>
Javascript:
var app = angular.module('app', []);
app.controller('MyController', function() {
});
app.directive('thisDirective', function($compile, $timeout) {
return {
scope: false,
link: function(scope, element, attrs) {
var ngModel = attrs.ngModel;
var htmlText = '<input type="text" ng-model="'+ ngModel + '" />' +
'<div child-directive ng-model="'+ ngModel + '"></div>';
$compile(htmlText)(scope, function(_element, _scope) {
element.replaceWith(_element);
});
//Not sure how to watch changes in childDirective's ngModel ???????
}, //end link
} //end return
});
app.directive('childDirective', function($compile, $timeout) {
return {
scope: {
ngModel: '='
},
link: function(scope, element, attrs, ngModel) {
var htmlText = '<input type="text" ng-model="ngModel" />';
$compile(htmlText)(scope, function(_element, _scope) {
element.replaceWith(_element);
});
//Here the directive text field updates after some server side process
scope.ngModel = scope.dbInsertId;
scope.$watch('dbInsertId', function(newValue, oldValue) {
if (newValue)
console.log("I see a data change!"); //Delete this later
scope.ngModel = scope.imageId;
}, true);
},
} //end return
});
Dans l'exemple, vous pouvez voir qu'il y a une saisie de texte à l'intérieur d'un parent de la directive ainsi que de son enfant directive. Si vous tapez à l'intérieur de chacun d'eux, l'autre modèle est mis à jour car elles sont liées par ngmodel
. Cependant, l'enfant de la directive de la saisie de texte est mis à jour après la connexion au serveur. Lorsque cela se produit, la saisie de texte dans le parent de la directive de ne pas être à jour. Donc, je pense que j'ai besoin de regarder le ngModel à l'intérieur de l'enfant directive pour tout changement. Comment puis-je le faire? Est-il judicieux?
- Pense que vous devez rechercher ngModelController et comment travailler avec ng-model dans votre propre directives, il y a quelques décent docs sur le sujet docs.angularjs.org/api/ng/type/ngModel.NgModelController
- C'est quelque chose comme ce que vous souhaitez? jsfiddle.net/CnDKN/2
- Je pense que c'est exactement ce que je voulais! 🙂 Je vais essayer dans mon code et sera mise à jour. Merci beaucoup!
- Salut @JoseM Il fonctionne bien dans l'exemple, mais je suis en train de faire quelque chose de mal dans mes codes. Ma question est: ai-je besoin
timeout
fonction en un véritable serveur de communication? Je veux que le champ d'application de la mise à jour descope.ngModel = scope.dbInsertId;
quand il y a un changement dedbInsertId
. Mais quand j'ajoute qu'à l'intérieur descope.$watch
avantreturn ngModel.$modelValue;
, ce n'est pas la mise à jour de la mère de la directive. Il fonctionne lorsque je l'ai mis dans$timeout
. Ce que je fais mal? - Vous avez besoin de faire un portée.$appliquer() depuis que le code est appelé à partir de l'extérieur du angulaire à digérer cycle
- J'ai eu une lecture
scope.$apply()
mais je ne pourrais pas trouver un bon exemple sur la façon de l'utiliser. C'est la première fois que je suis venue à traversscope.$apply
. Si je ne suis pas trop demander, pourriez-vous me montrer un exemple rapide, s'il vous plaît? Je suis tellement désolé de vous harceler. 🙁 - J'ai essayé quelques méthodes de
scope.apply()
et son lancer beaucoup d'erreurs. Donc, je suis évidemment faire quelque chose de mal. - Salut @JoseM, j'ai finalement été en mesure d'obtenir la portée.appliquer() fonctionne. Je vous remercie pour votre soutien hier. Qui m'a aidé à comprendre comment je peux regarder le chlld directive de la mère de la directive. Si vous pouvez poster votre commentaire ci-dessus, à titre de réponse, je vais l'accepter comme votre jsfiddle m'a aidé avec ma question. 🙂
- Ne serait pas ng-changement="fn()" résoudre de trop?
Vous devez vous connecter pour publier un commentaire.
Comme @shaunhusain mentionné que vous avez à utiliser le ngModelController à interagir avec ngModel. Sur le ngModelController vous pouvez configurer une montre sur la
$modelValue
et vous pouvez modifier la valeur dans le modèle en appelant$setViewValue
. Rappelez-vous que l'utilisation de la ngModelController vous avez besoin d'ajouter unrequire: "ngModel"
à votre directive définition de l'objet.Lorsque vous obtenez une valeur provenant de l'extérieur du angulaire (comme à partir de votre base de données) et vous, à son tour voulez utiliser cette valeur pour modifier la valeur de modèle, vous avez besoin de mettre ce code dans un
scope.$apply()
pertinentes jsfiddle http://jsfiddle.net/CnDKN/2/
MAIS je ne pense pas que ce n'est pas vraiment le droit d'utilisation de
$setViewValue
. Selon la documentation, qui est censé être utilisé pour mettre à jour la valeur qui est affichée sur l'INTERFACE utilisateur, pas nécessairement la valeur de modèle.Il n'y a en fait une autre façon de faire ce travail qui, je pense, est plus simple et plus facile à utiliser. Utilisez simplement
=attr
pour configurer bi-directionnelle de liaison de la propriété que vous souhaitez utiliser dans les deuxthisDirective
et danschildDirective
. Et alors vous pouvez simplement mettre en place la la ng-model attribut de paramètre dans votre directive et lors de la première utilisation, vous n'avez même pas besoin de savoir que c'est à l'aide de ng-model en dessous.Voici le code qui vous montre ce que je veux dire:
Mis à jour jsfiddle exemple: http://jsfiddle.net/CnDKN/3/
scope.$appy()
méthode. J'ai eu du mal avec ça. Je trouve aussi qu'il est beaucoup plus facile d'avoir un isolé portée, passer leng-model
et l'utiliser pour regarder et mettre à jour le modèle. Votre deuxième exemple a aidé beaucoup avec qui. L'un des plus gros défi a été la$apply
. Ce qui se passait était la seule définition de l'$watch
mise à jour de la ng-modèle enfant directive, mais le parent de la directive n'était pas au courant du changement. ....$apply
méthode de mise à jour de la portée et de la mère directive a pris conscience de ce changement. Tout a fonctionné à la fin. ouf... ce qu'est une courbe d'apprentissage qu'il était. Étant nouveau$apply
, j'ai eu un moment difficile dans la compréhension de où et comment l'utiliser et il n'y avait pas trop d'exemples sur ce. Maintenant il prend tout son sens. Je vous remercie beaucoup pour votre aide... Il se sent si bon, une fois que vous apprendre l'angle de la magie après avoir été perdu dans le désert! 🙂