So erstellen Sie eine Richtlinie auf eine dynamische Vorlage in AngularJS?

Wie kann ich erstellen Sie eine Richtlinie mit einem dynamischen template?

'use strict';

app.directive('ngFormField', function($compile) {
return {
    transclude: true,
    scope: {
        label: '@'
    },
    template: '<label for="user_email">{{label}}</label>',
    //append
    replace: true,
    //attribute restriction
    restrict: 'E',
    //linking method
    link: function($scope, element, attrs) {
        switch (attrs['type']) {
            case "text":
                //append input field to "template"
            case "select":
                //append select dropdown to "template"
        }
    }
  }
});

<ng-form-field label="First Name" type="text"></ng-form-field>

Dies ist, was ich jetzt haben, und es zeigt die Bezeichnung korrekt. Allerdings bin ich mir nicht sicher, wie das Anhängen zusätzlicher HTML-Vorlage. Oder die Kombination von 2 Vorlagen in 1.

InformationsquelleAutor teepusink | 2013-02-13

angularjs angularjs-directive

18

Hatte ein ähnliches Bedürfnis. $compile der job nicht. (Nicht ganz sicher, ob dies "DER" Weg, es zu tun, arbeiten noch meinen Weg durch Winkel -)

http://jsbin.com/ebuhuv/7/edit - meine exploration-test.

Eine Sache zu beachten (gemäß meinem Beispiel), eine meiner Anforderungen war, dass die Vorlage würde sich ändern, basierend auf einer type Attribut nachdem Sie auf speichern geklickt, und die Vorlagen waren sehr unterschiedlich. So aber kriegst du die Daten verbindlich, wenn nötig, eine neue Vorlage gibt, müssen Sie neu kompilieren zu müssen.
- Es scheint nicht Ihr Beispiel ist korrekt arbeitet. Konnten Sie Folgen?
- Edit: Habe es funktioniert, wie es aussieht, wurde bootstrap. Aktualisiert link: jsbin.com/wikocaru/2/edit
- Antworten sollte enthalten vollständige Beispiele und code, keine links, die am Ende wird broken links später.
- Wäre schön, zu sehen an kleinen code-snippet in die akzeptierte Antwort.
InformationsquelleAutor nowk
30

habe ich die $templateCache zu erreichen etwas ähnliches. ich legte einige ng-Vorlagen in einer einzigen html-Datei, die ich-Referenz mit der Richtlinie templateUrl. sorgt dafür, dass das html-Format, um den template-cache. dann kann ich wählen Sie einfach per id zu bekommen, die ng-Vorlage, die ich möchte.

template.html:
```
<script type="text/ng-template" id=“foo”>
foo
</script>

<script type="text/ng-template" id=“bar”>
bar
</script>
```
Richtlinie:
```
myapp.directive(‘foobardirective’, ['$compile', '$templateCache', function ($compile, $templateCache) {

    var getTemplate = function(data) {
        //use data to determine which template to use
        var templateid = 'foo';
        var template = $templateCache.get(templateid);
        return template;
    }

    return {
        templateUrl: 'views/partials/template.html',
        scope: {data: '='},
        restrict: 'E',
        link: function(scope, element) {
            var template = getTemplate(scope.data);

            element.html(template);
            $compile(element.contents())(scope);
        }
    };
}]);
```
- Netter Zug, Zim! Nur eine leichte Vereinfachung: $templateCache ist innerhalb der link-Funktion, so dass Sie nicht wirklich brauchen, die Funktion getTemplate
- Aber wie würden Sie pass id dynamisch?
- +1 für $compile(element.contents()). War verrückt, weil ich nicht wusste etwa, dass .contents() ìn $compile. (Endlosschleife aufrufen meiner Richtlinie, natürlich)
- Dies funktioniert nicht mit einem replace: true Richtlinie.
- Wie bereits von @IcanDivideBy0, Ihre Lösung funktioniert nicht, wenn wir replace: true in der Richtlinie. Durch Zufall wissen Sie, wie Sie es beheben?
- Nein, ich habe nicht eine Lösung für replace: true.
- ich habe eine separate getTemplate() Funktion nur, um die link-Funktion sauber. ich könnte inline-es, ja, aber wenn es eine Menge von code, um die Daten analysieren und entscheiden, welche Vorlage Sie verwenden, kann es zu verschleiern, die wichtige Letzte 2 Zeilen von der link-Funktion. Und ich bin ein fan von kleinen, single-function-Methoden sowieso.
- Und diese auseinander brechen könnten, wenn Sie transcluded Inhalte, die Sie nicht verlieren wollen.
- Wie Ihr Ansatz, danke fürs teilen. 🙂
InformationsquelleAutor zim

Sollten Sie Ihre Schalter in der Vorlage mit dem ' ng-switch " - Richtlinie:

module.directive('testForm', function() {
    return {
        restrict: 'E',
        controllerAs: 'form',
        controller: function ($scope) {
            console.log("Form controller initialization");
            var self = this;
            this.fields = {};
            this.addField = function(field) {
                console.log("New field: ", field);
                self.fields[field.name] = field;
            };
        }
    }
});

module.directive('formField', function () {
    return {
        require: "^testForm",
        template:
            '<div ng-switch="field.fieldType">' +
            '    <span>{{title}}:</span>' +
            '    <input' +
            '        ng-switch-when="text"' +
            '        name="{{field.name}}"' +
            '        type="text"' +
            '        ng-model="field.value"' +
            '    />' +
            '    <select' +
            '        ng-switch-when="select"' +
            '        name="{{field.name}}"' +
            '        ng-model="field.value"' +
            '        ng-options="option for option in options">' +
            '        <option value=""></option>' +
            '    </select>' +
            '</div>',
        restrict: 'E',
        replace: true,
        scope: {
            fieldType: "@",
            title: "@",
            name: "@",
            value: "@",
            options: "=",
        },
        link: function($scope, $element, $attrs, form) {
            $scope.field = $scope;
            form.addField($scope);
        }
    };
});

Kann es verwenden, wie diese:

<test-form>
    <div>
        User '{{!form.fields.email.value}}' will be a {{!form.fields.role.value}}
    </div>
    <form-field title="Email" name="email" field-type="text" value="[email protected]"></form-field>
    <form-field title="Role" name="role" field-type="select" options="['Cook', 'Eater']"></form-field>
    <form-field title="Sex" name="sex" field-type="select" options="['Awesome', 'So-so', 'awful']"></form-field>
</test-form>

InformationsquelleAutor Aquajet

3

Wenn Sie verwenden möchten, AngularJs-Direktive, die mit der dynamischen Vorlage, die Sie verwenden können, diejenigen, die Antworten,Aber hier ist mehr professionelle und rechtliche syntax von es.Sie können templateUrl nicht nur mit dem einzelnen Wert.Sie können es verwenden, als eine Funktion,die einen Wert zurückgibt als url.Diese Funktion hat einige Argumente,die Sie verwenden können.

http://www.w3docs.com/snippets/angularjs/dynamically-change-template-url-in-angularjs-directives.html
- Dies nicht ermöglicht, dynamisch ändern Sie den Inhalt, wenn einige Daten verändert haben. Zum Beispiel war ich einem Datentyp-Attribut, diktieren die Vorlage, die verwendet werden - dann, wenn der Benutzer Schalter geben, ich brauche eine andere Vorlage.
InformationsquelleAutor Hazarapet Tunanyan

Eine Möglichkeit ist die Verwendung einer template-Funktion in Ihrer Richtlinie:

...
template: function(tElem, tAttrs){
    return '<div ng-include="' + tAttrs.template + '" />';
}
...

InformationsquelleAutor user2173353

1

Ich es geschafft, mit diesem problem umzugehen. Unten ist der link :

https://github.com/nakosung/ng-dynamic-template-example

mit der spezifischen Datei:

https://github.com/nakosung/ng-dynamic-template-example/blob/master/src/main.coffee

dynamicTemplate Richtlinie hosts dynamische Vorlage, die übergeben wird, in Umfang und hosted-element verhält sich wie andere native eckigen Elementen.
```
scope.template = '< div ng-controller="SomeUberCtrl">rocks< /div>'
```
InformationsquelleAutor nakosung
0

Habe ich in der gleichen situation, mein komplette Lösung gepostet wurde hier

Grundsätzlich habe ich eine Vorlage laden, die in der Richtlinie in dieser Weise
```
var tpl = '' + 
    <div ng-if="maxLength" 
        ng-include="\'length.tpl.html\'">
    </div>' +
    '<div ng-if="required" 
        ng-include="\'required.tpl.html\'">
    </div>';
```
dann nach dem Wert maxLength und required ich können dynamisch laden Sie eine der 2 Vorlagen, nur einer von Ihnen zu einem Zeitpunkt angezeigt wird, wenn notwendig.

Ich heope es hilft.

InformationsquelleAutor felix at housecat

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.