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 de scope.ngModel = scope.dbInsertId; quand il y a un changement de dbInsertId. Mais quand j'ajoute qu'à l'intérieur de scope.$watch avant return 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 à travers scope.$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?

InformationsquelleAutor Neel | 2014-04-02