Angularjs directive: comment trouver un élément dynamique de l'id, et modifiez le modèle

Je suis en train de générer dynamiquement un formulaire, basé sur un modèle qui a certaines propriétés dynamiques.

Je suis proche, mais avoir de la difficulté à extraire un élément conteneur.

C'est la directive:

myApp.directive('myDirective', function () {
    return {
    template: "<div> <label>{{Field.Name}} <div id='{{Field.Name}}_Container'></div> </label></div>",
    replace: true,
    restrict: 'AE',
    scope: {
        Field: "=fieldInfo",
        FieldData:"="
    },
    link: function (scope, element, attr) {
        var input = "<input type='" + scope.Field.Type + "' data-ng-model='FieldData[" + scope.Field.Name + "]' />";
        var inputEl = angular.element(input);
        var container = angular.element("#" + scope.Field.Name + "_Container"); //Doesn't work
        container.append(inputEl);
    }
}

});

Contrôleur:

function MyCtrl($scope) {
    $scope.Fields = [
      { Name: "field1", Type: "text", Data:null },
      { Name: "field2", Type: "number", Data:null }
    ];

     $scope.FieldData = {}; //{fieldname: fielddata}
}

Html:

<div ng-controller="MyCtrl">
      <my-directive data-ng-repeat="field in Fields" data-field-info="field">
    </my-directive>
</div>

Fondamentalement, je n'ai domaines descripteur d'objets, et de la nécessité de créer un formulaire basé sur cette.
Je ne suis pas tout à fait sûr de la façon de faire référence à un objet conteneur - n'modèle doit être compilé avant de les lier en quelque sorte ?

Aussi, je suis en fait en utilisant templateUrl, si ce qui compte.

Et voici un violon.

OriginalL'auteur Evgeni | 2013-01-09

  1. 5

    Vous devez utiliser $compiler la compilation de modèle html. Aussi, vous pouvez utiliser element dans le link fonction pour accéder à l'extérieur div dans votre modèle.

    var myApp = angular.module('myApp', []);

myApp.directive('myDirective', function ($compile) {
    return {
        template: "<div> <label>{{Field.Name}} <div id='{{Field.Name}}_Container'></div> </label></div>",
        replace: true,
        restrict: 'AE',
        scope: {
            Field: "=fieldInfo",
            FieldData:"="
        },
        link: function (scope, element, attr) {
            var input = "<input type='" + scope.Field.Type + "' data-ng-model='FieldData[" + scope.Field.Name + "]' />";
            var html = $compile(input)(scope);
            element.find('div').append(html);
        }
    }
});

    Voir jsfiddle.

    +1, Mais les futurs lecteurs devraient noter cet élément.find() est récursive, donc, si le modèle a été plus compliqué que cela, vous devez utiliser une autre approche (comme élément.les enfants()).
    Changé. Le point a été d'utiliser "élément" dans la fonction de lien
    Je pense que votre première façon est la meilleure dans ce cas. Remarque: je ne pense pas que jqLite prend en charge une valeur de recherche dans element.children comme jQuery, mais je peux me tromper ici.
    Merci pour la mise à jour. Je suppose qu'il a travaillé, depuis je n'ai pas d'erreur 😉
    Non, ne fonctionne pas. élément n'est pas id compilé encore. Si je l'appelle --> var a = $compiler(elem)(champ d'application);console.log(a.html()); -- retourne la valeur null pour une raison quelconque. Pas un problème dans ce cas, vraiment, mais avec plus de complexe modèle, il serait agréable d'être en mesure de cibler élément spécifique.

    OriginalL'auteur asgoth