多个指令 [指令#1，指令#2] 要求在上进行隔离作用域

Question

我试图在一个已经存在的指令基础上构建一个新的指令，但是我在进行过程中遇到了阻碍。当加载页面时，我遇到以下错误：

多个指令 [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行中删除了该属性并从我的封装指令中删除了它，但这并没有起到效果。

- Rohan

---

请问您能否设置Fiddle？ - Ajay Beniwal

Answer 1

您需要更改easydialog模板，并将<easymodal>包装在一个<div>中。

- Langdon

---

谢谢，我从来没想到过。 - Rohan

你能详细说明一下吗？首先出现了什么问题，将它们包装在 div 中如何解决它？ - masimplo

我认为 Angular 将 HTML 元素与作用域相关联，并且不能将单个 HTML 元素关联到多个作用域。 - Langdon

Answer 2

你的问题很简单，就是在指令内添加了一个名为template的参数，并在实际的HTML模板中添加了一个名为<easydialog>的解析模板标签。你必须选择其中之一。

- kaiser