42

私は次の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>

そして、次の2つのディレクティブ

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

angularが私を投げているという次のエラーは、正確にはどういう意味ですか?

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

http://jsfiddle.net/sEZM3/のjsfiddle

4

13 に答える 13

30

両方のディレクティブが、dom 内の要素を置き換えようとしています。replace: trueディレクティブ定義オブジェクトの行を削除してみてください。

于 2013-11-06T02:18:18.980 に答える
29

誤って同じディレクティブ コードを複数回ロードしようとすると、同じエラーが発生する場合があります。特に、すべての Angular アイテム (ディレクティブなど) を個別のファイルに保持し、すべてを個別の行に含める場合に発生する可能性があります。それが私の場合でした。

于 2015-07-30T12:09:27.263 に答える
8

私にとっては、同じディレクティブが index.html に 2 回含まれていました。

于 2016-04-27T22:31:35.130 に答える
4

同じ名前の 2 つのコンポーネントを持っていたときに発生しました (コピー ペースト エラー):

私のcoffeescriptの場合、純粋な角度で簡単に発生します：

component1.coffee
    appModule.component('name', {
    templateUrl: '/public/partials/html1.html',
  controller: 'controler1',
  bindings: {
    somebindings: '<'
  }
});


component2.coffee
    appModule.component('name', {
    templateUrl: '/public/partials/html2.html',
  controller: 'controler2',
  bindings: {
    somebindings: '<'
  }
});

結論: 「名前」はアプリ全体で一意である必要があります。

于 2016-08-11T10:11:27.953 に答える
2

サイズ変更可能なディレクティブが正しくありません。ディレクティブは最も内側の要素に適用する必要があります。ng-transcludeこれは、そのコンテンツが破棄され、トランスクルージョンされたコンテンツに置き換えられるためです。

tboxディレクティブ テンプレートを (修正された)サイズ変更可能な要素ディレクティブで囲む必要があります。editoptions属性が何をするのかわかりませんが、それがディレクティブでもある場合は、テンプレートも持つべきではありません。

私は次のようなことを意味します：

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

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

結果：

<div ng-style="{top:tb.x, left:tb.y, height:tb.height, width:tb.width}"  ng-transclude>
    <div class="editbox" editoptions>{{tb.text}}</div>
</div>
于 2013-11-06T02:15:17.090 に答える
1

私の場合、BundleConfig に不足しているファイルへの参照がありました。参照を削除すると、機能し始めました。

于 2016-02-06T00:15:45.067 に答える
0

（それが他の誰かを助ける場合）

私にとって問題は、参照用に使用していたテンプレートの古いコピーであるバックアップ ファイル (つまり .bkp.html) を持っていたことでしたが、これは ".../**/ *.html」パターン。

于 2016-07-14T15:45:01.903 に答える
0

templateまた、とtemplateUrlプロパティの両方を同じディレクティブに保持するなどの単純な間違いである可能性もあります。

于 2016-02-12T13:59:55.233 に答える