エラー：カスタムディレクティブを作成するとき、テンプレートに正確に1つのルート要素が必要です

Question

私はちょうどangularJSを使用してプロジェクトを開発し始めました。私は、カーソルがその上に置かれているかどうかを示すボタンを持つ簡単な指示文を作りたいと思います。しかし、この新しいディレクティブを私のindex.htmlに含めるたびに、私はこのエラーを受け取ります。ここで

は次のエラーです：ここでは

Error shown on console

は私のテンプレートのコードです：ここで

<div> 
    <button ng-show="ishovering">DELETE</button> 
</div> 

は私の指示コードです：

app.directive('deleteArea',function(){ 
return { 
    scope: {}, 
    require: 'ng-show', 
    restrict: "AE", 
    replace: true, 
    templateUrl: "./templates/delete.html", 
    link: function(scope,elem,attrs){ 
     elem.bind('mouseover',function(){ 
      elem.css('cursor','pointer'); 
      scope.$apply(function(){ 
       scope.ishovering = true; 
      }); 
     }); 
    } 
}; 
}); 

すべてのヘルプは高く評価され、ありがとうございました。

Answer 1

ui.bootstrapと呼ばれる角度のブートストラップを使用してください。 必要な効果をもたらすpopoverディレクティブを使用します。