26

我正在尝试在已经存在的指令之上构建一个新指令,但我的进程停止了。加载页面时,我遇到以下错误:

多个指令 [directive#1,directive#2] 要求隔离范围<easymodal title="Test-Title" text="Text-Text" oncancel="show = false" onok="alert();">

基本指令如下所示:

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

我的包装器指令如下所示:

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

我的 html 看起来像这样:

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

起初我虽然我的标题属性是冲突的,所以我在 html 行和我的包装器指令中删除了该属性,但它无效。

4

2 回答 2

31

您需要更改easydialog模板并<easymodal><div>.

于 2013-04-22T13:28:58.073 回答
0

您的问题只是您在实际 HTML 模板中添加了一个template参数directive以及添加了一个解析模板标记。<easydialog>您可以选择其中一个或另一个。

于 2013-09-12T22:21:16.047 回答