it-swarm.com.de

Mehrere Direktiven [Direktive # 1, Direktive # 2], die nach isoliertem Geltungsbereich fragen

Ich versuche, eine neue Direktive auf eine bereits bestehende Direktive aufzubauen, aber ich bin in meinem Prozess angehalten. Beim Laden der Seite tritt der folgende Fehler auf:

Mehrere Direktiven [Direktive # 1, Direktive # 2], die nach isoliertem Geltungsbereich für <easymodal title="Test-Title" text="Text-Text" oncancel="show = false" onok="alert();"> fragen

Die Basisanweisung sieht folgendermaßen aus:

Rohan.directive('easymodal', function () {
    return {
        restrict: 'E',
//      priority: 200,
        transclude: true,
        replace: true,
        scope:{
            showModal: "=show",
            callback: "=closeFunction",
            dismissable: '&'
        },
        template:
            '<div data-ng-show="showModal" class="modal-container">' +
                '<div class="modal-body">' +
                    '<div class="title"><span data-translate></span><a data-ng-show="dismissable" data-ng-click="dismiss()">x</a></div>' +
                    '<div data-ng-transclude></div>' +
                '</div>' +
                '<div class="modal-backdrop" data-ng-click="dismiss()"></div>' +
            '</div>'
    };
});

Und meine Wrapper-Direktive sieht so aus: 

Rohan.directive('easydialog', function () {
    return {
        restrict: 'E',
        transclude: true,
        scope: {title: '@',
            text: '@',
            onOk: '&',
            onCancel: '&'},
        replace: true,
        template:
            '<easymodal>' +
                '{{text}} ' +
                '<hr>' +
                '<button ng-click="{{onCancel}}" value="Cancel"' +
                '<button ng-click="{{onOk}}" value="Ok"' +
            '</easymodal>'
    };
});

Meine HTML sieht so aus:

<easydialog title="Test-Title" text="Text-Text" onCancel="show = false" onOk="alert();" />

Zuerst dachte ich, mein Titelattribut war in Konflikt, also entfernte ich dieses Attribut in der HTML-Zeile und aus meiner Wrapper-Direktive, aber es war nicht effektiv.

26
Rohan

Sie müssen Ihre easydialog-Vorlage ändern und <easymodal> in einen <div> einschließen.

31
Langdon

Ihr Problem besteht einfach darin, dass Sie ein template-Argument innerhalb der directive hinzufügen sowie ein auflösendes Vorlagen-Tag mit dem Namen <easydialog> in Ihre HTML-Vorlage. Sie haben entweder die eine oder die andere Wahl.

0
kaiser