web-dev-qa-db-fra.com

Directives multiples [directive n ° 1, directive n ° 2] demandant un champ d'application isolé sur

J'essaie de construire une nouvelle directive en plus d'une directive déjà existante, mais je suis bloqué dans mon processus. Lors du chargement de la page, je rencontre l'erreur suivante:

Directives multiples [directive n ° 1, directive n ° 2] demandant un champ d'application isolé sur <easymodal title="Test-Title" text="Text-Text" oncancel="show = false" onok="alert();">

La directive de base ressemble à ceci:

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>'
    };
});

Et ma directive wrapper ressemble à ceci: 

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>'
    };
});

Mon html ressemble à ceci:

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

Au début, j’imaginais que mon attribut de titre était en conflit, j’ai donc supprimé cet attribut dans la ligne html et dans la directive wrapper, mais elle n’était pas efficace.

angularjsangularjs-directive
26
Rohan

Vous devez modifier votre modèle easydialog et envelopper <easymodal> dans un <div>.

31
Langdon

Votre problème est simplement que vous ajoutez un argument template à l'intérieur de directive, ainsi qu'une balise de résolution de modèle nommée <easydialog> dans votre modèle HTML actuel. Vous avez le choix entre l'un ou l'autre.

0
kaiser