Question

我有自定义指令的定义：

crmModule.directive("some", [function() {
return {
    restrict: "E",
    replace: true,
    scope: {
        itemModel: "=model"
    },
    templateUrl: "/Static/CRMpages/user-details-templates/preview-template.html",
    link: function (scope, element, attrs) {
        if (scope.itemModel.dueDateEnabled) {
            scope.itemModel.date = scope.itemModel.dueDate.getDate();
            scope.itemModel.month = scope.itemModel.dueDate.toLocaleDateString("en", { month: "short" }).toUpperCase();
            scope.itemModel.time = scope.itemModel.dueDate.toLocaleTimeString("en", { hour: "numeric", minute: "numeric" });
        }
        scope.$watch('itemModel.dueDate', function() {
            scope.itemModel.date = scope.itemModel.dueDate.getDate();
            scope.itemModel.month = scope.itemModel.dueDate.toLocaleDateString("en", { month: "short" }).toUpperCase();
            scope.itemModel.time = scope.itemModel.dueDate.toLocaleTimeString("en", { hour: "numeric", minute: "numeric" });
        });
    }

}}])

在我的HTML页面中，我按照以下方式使用它：

<some model="actionModel"/>

同时我有主页面，我有按钮，当我点击此按钮时，我将路线（我使用ui-router）更改为clients.action.edit并加载模板edit.html：

<div class="action-plan-edit">
<div class="checkboxes col-sm-4">
    <div class="due-date-section">
        <div class="labels">
            <input  id="dueDateEnabled" type="checkbox" ng-model="actionModel.dueDateEnabled">
            <span>Set due date</span>
        </div>

        <div class="dueDate-selector" slide open="actionModel.dueDateEnabled">
            <div date-picker="actionModel.dueDate" nd-model="actionModel.dueDate" view="month" min-view="hours" max-view="month"></div>
            <div class="selected-time">
                <span class="date">{{actionModel.dueDate|itemDate}}</span>
                <span class="time">{{actionModel.dueDate|itemTime}}</span>
            </div>
        </div>

    </div>
    <div class="booking-section">
        <div class="labels">
            <input  id="bookingAttached" type="checkbox" ng-model="actionModel.bookingEnabled">
            <span>Attach booking</span>
        </div>

        <div class="booking-attachment-area" slide open="bookingEnabled">
            <select></select>
            <select></select>
        </div>
    </div>
    <div class="sms-section">
        <div class="labels">
            <input id="smsEnabled" type="checkbox" ng-model="actionModel.smsEnabled" >
            <span>Send sms to client</span>
        </div>
    </div>



</div>
<div class="result-preview col-sm-6">
    <div class="input-section">
        <textarea class="crm-text-area" ng-model="actionModel.description" placeholder="Action description.."></textarea>
    </div>
    <div class="bordered-block">
         <p class="preview-header">Live preview of action item</p>
        <some model="actionModel"/>
    </div>

    <div class="save-button-section">
        <button class="save-button" ng-click="saveItem()" ng-disabled="!itemValid">Save</button>
    </div>
</div>
</div>

正如您在此页面中看到我使用指令some。 Al需要包含文件，但我总是遇到这样的错误。

多个指令[some，some]要求模板：

请帮我解决这个问题。

UPDATE ：我发现该指令的链接函数调用了两次。这可能是ui-router的问题吗？

Answer 1

要解决您的问题，请删除指令中的属性replace: true,。

指令使用HTML标记（在您的情况下为<some></some>）来隔离范围，如果您使用replace: true此标记被删除，那么范围不会被隔离并且您会收到错误。< / p>

请注意angular docs中列出的此方案：

请求isolated scope的多个指令。

希望这有帮助！

角度中的多指令资源争用错误

1 个答案: