Balise dynamique avec angularjs directive

Je voudrais créer un élément de la directive dans angularjs qui produit un élément html à partir d'un json blob passé comme un attribut. J'ai essayé assez peu de variations de la suite...

demoApp.directive("element", function() {
    return {
        restrict: "E",
        scope: {
            attributes: "@",
            name: "@"
        },
        template:         
            function(name, attributes) {
                var templateString = "<" + attributes.tag;
                for (attribute in attributes) {
                    if (attribute != "name_displayed" && attribute != "tag") {
                        templateString += " " + attribute + "=\"" attributes[attribute] + "\"";
                    }
                }
                templateString += " name=\"" field + "\"";
                templateString += ">";
                templateString += "</" + attributes.tag + ">";
                return attributes.name_displayed + ": " + templateString;
            }(name, attributes)
    };
});

Le code html ressemble à

<div ng-repeat="(name, attributes) in fields">
    <element name="{[{name}]}" attributes="{[{attributes}]}"></element>
</div>

Où l'un des attributs d'objet json ressemble

{"name_displayed":"Agency","size":"30","tag":"input","type":"text"}

Et un nom ressemble

agency

Il semble que je ne peut pas utiliser une fonction pour un modèle, et aussi, il semble que je ne peut pas accéder aux attributs ou des objets de nom.

  • Votre json est le premier problème. Le stockage de balisage des instructions dans un json (sans doute d'être sauvegardé sur le serveur) est bizarre...et je suis tenté de dire tout simplement ridicule. Même si vous avez besoin pour être en mesure de prendre une entrée de l'utilisateur et de la forme d'un modèle pour une sortie plus tard, vous enregistrez le modèle dans un fichier html, et non comme un json.
InformationsquelleAutor Alex | 2013-11-14
  1. 0

    Check this out: http://jsfiddle.net/es4Y6/1/

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

function ctrl($scope) {
    $scope.fields = {
        first: '{"name_displayed": "Agency", "size": "30", "tag": "input", "type": "text"}',
        second: '{"name_displayed": "Foo", "size": "30", "tag": "input", "type": "password"}',
        third: '{"name_displayed": "Bar", "size": "30", "tag": "input", "type": "number"}'
    };
}

app.directive('blah', function() {

    var template = function(name, attributes) {
        var templateString = "<" + attributes.tag;
        for (var attribute in attributes) {
            if (attribute != "name_displayed" && attribute != "tag") {
                templateString += " " + attribute + '="' + attributes[attribute] + '"';
            }
        }
        templateString += ' name="' + name + '"';
        templateString += ">";
        templateString += "</" + attributes.tag + ">";
        return attributes.name_displayed + ": " + templateString;
    };

    return {
        restrict: "E",
        link: function(scope, element, attrs){
            var attributes = angular.fromJson(attrs.attributes);
            var tpl = template(attrs.name, attributes);
            element.html(tpl);
        }
    };

});

    Je suppose que par "json blob" vous voulez dire, chaîne json. Si non, alors vous dire JS objet. Dans de tels cas, la mise à jour $scope.fields et supprimer angular.fromJson().

    <div ng-app="hmm">
    <div ng-controller="ctrl">
        <div ng-repeat="(name, attributes) in fields">
            <blah name="{{name}}" attributes="{{attributes}}"></blah>
        </div>
    </div>    
</div>

    Il fonctionne, cependant c'est une très mauvaise approche du problème que vous essayez de résoudre.

    InformationsquelleAutor Adam
  2. 0

    Vous pouvez mettre en œuvre votre logique dans link fonction au lieu d'une template. Essayez ceci:

    HTML

    <element ng-repeat="field in fields" />

    JavaScript

    angular.module('demo', []).
controller('demoCtrl', ['$scope', function($scope) {
$scope.fields = [{
"tag": "input",
"type": "text",
"value": "Demo app",
"name": "my_input",
"label": "My Text"
}, {
"tag": "input",
"type": "checkbox",
"checked": "checked",
"name": "my_checkbox",
"label": "My Checkbox"
}, {
"tag": "input",
"type": "button",
"value": "Click Me",
"name": "my_button"
}];
}]).
directive('element', function() {
return {
restrict: "E",
replace: true,
template: "<div></div>",
link: function(scope, element, attrs) {
var label,
el,
key,
field;
field = scope.field;
if('label' in field) {
label = document.createElement('label');
label.innerHTML = field.label;
element.append(label);
element.append(document.createTextNode(': '));
}
el = document.createElement(field.tag);
for(key in field) {
if(field.hasOwnProperty(key) && //avoid prototype properties
key !== 'tag' && //avoid tag
key !== 'label' && //avoid label
key[0] !== '$' //avoid angular staff derived from scope
) {
el.setAttribute(key, field[key]);
}
}
element.append(el);
}
};
});

    Ici est un exemple: http://plnkr.co/edit/B1RigXrzA2l1kIVNVXGw?p=preview

    InformationsquelleAutor Vadim