多个指令要求模板 [英] Multiple directives asking for templates on

问题描述

我有以下 HTML:

<div style="border:1px solid; height:300px; width:500px; position:relative; left:100px" id="canvas"><tbox ng-repeat="tb in textBoxes" ng-model="tb"></tbox>

以及以下 2 个指令

appModule.directive('resizable', function($compile, $document) {返回 {限制:A"，模板:'<div ng-style="{top:tb.x, left:tb.y, height:tb.height, width:tb.width}" ng-transclude><span class="scale">s</span></div>',转置:真实，替换:真的，要求:'ngModel'}});appModule.directive('tbox', function($document) {返回 {限制:E"，模板:'<div class="editbox" resizable editoptions>{{tb.text}}</div>',替换:真}});

angular 抛出的以下错误究竟是什么意思?

错误:多个指令 [tbox, resizable] 要求模板:<div class="editbox" resizable="" editoptions="" ng-repeat="tb in textBoxes" ng-model="tb">

jsfiddle 位于 http://jsfiddle.net/sEZM3/

解决方案

您的两个指令都试图替换 dom 中的元素.尝试删除指令定义对象中的 replace: true 行.

I have the following HTML:

<div style="border:1px solid; height:300px; width:500px; position:relative;  left:100px" id="canvas">
  <tbox ng-repeat="tb in textBoxes" ng-model="tb">
  </tbox>
</div>

And the following 2 directives

appModule.directive('resizable', function($compile, $document) {
  return {
    restrict: "A",
    template: '<div ng-style="{top:tb.x, left:tb.y, height:tb.height, width:tb.width}"  ng-transclude><span class="scale">s</span></div>',
    transclude: true,
    replace: true,
    require: 'ngModel'
  }
});

appModule.directive('tbox', function($document) {
  return {
    restrict: "E",
    template: '<div class="editbox" resizable editoptions>{{tb.text}}</div>',
    replace: true
  }
});

What exactly does the following error that angular is throwing me means?

Error: Multiple directives [tbox, resizable] asking for template on: <div class="editbox" resizable="" editoptions="" ng-repeat="tb in textBoxes" ng-model="tb">

jsfiddle at http://jsfiddle.net/sEZM3/

解决方案

Both of your directives are trying to replace the element in the dom. Try removing the the replace: true lines in your directive definition object.

这篇关于多个指令要求模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！