AngularJS - Est-il possible de changer la valeur de l'attribut ngModel sur directive dans link ou compile? - javascript, angularjs, angularjs-directive

J'essaie de créer une directive qui ajoutera un attribut ngModel à une balise en fonction de la valeur de l'attribut. Par exemple:

angular.module("myModule").
directive("myDirective", function() {
return {
link: function(scope, elem, attrs) {
var modelName = "myPrefix." + attrs.name;
attrs.$set("ngModel", modelName);
}
};
});

Pour que ce html:

<input name="foo" my-directive></input>

est compilé dans

<input name="foo" ng-model="myPrefix.foo" my-directive></input>

Il prend le nom de l'entrée, attache un préfixe et définit l'attribut ngModel sur cette valeur.

Lorsque j'essaie de faire cela dans la fonction de lien, il semble que le input ne pas être "enregistré avec le formController, de sorte que form.foo retourne non défini.

Est-il possible d'accomplir ce que j'essaie de faire?

MODIFIER:

Il semble que le ngModel L'attribut est défini sur le code HTML, mais il n'est pas enregistré avec le formulaire ou ngModelController n'est pas instancié. Si je regarde la valeur de ngModel dans le champ d'application, cela ne change pas lorsque je modifie l'entrée.

Réponses:

5 pour la réponse № 1

Vous devriez consulter la documentation pour le NgModelController. Cela répondra à votre question. Pour plus d'explications, voici l'essentiel:

Vous pouvez capturer un quatrième argument à la link: fonction, qui est votre ng-model valeur. Vous utilisez cet objet pour lire et définir le modèle.

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.on("blur keyup change", function() {
scope.$apply(read);
});
read(); // initialize

// Write data to the model
function read() {
var html = element.html();
// When we clear the content editable the browser leaves a <br> behind
// If strip-br attribute is provided then we strip this out
if( attrs.stripBr && html == "<br>" ) {
html = "";
}
ngModel.$setViewValue(html);
}
}

J'espère que cela pourra aider.

---

3 pour la réponse № 2

J'ai pu atteindre l'objectif en utilisant unfonction de modèle. Je pense que cela ne fonctionne pas dans la fonction link car il se produit après la collecte de toutes les directives. Le compilateur ne reconnaît donc pas qu'un ngModel la directive a été ajoutée. Je ne suis pas sûr de savoir pourquoi cela ne fonctionne pas dans la fonction de compilation, cependant (même si je mets la priorité à 100).

Voici la version de travail de la directive:

angular.module("myModule").
directive("myDirective", function() {
return {
replace: true,
template: function(elem, attr) {
var newElem = "<input ng-model="model." + attr.name + "">";
return newElem;
}
};
});

---