错误：创建自定义指令时，模板必须只有一个根元素

Question

我想创建一个简单的指令，它有一个按钮，显示光标是否放在它上面。但是，每次我将这个新指令包含到我的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

只需使用bootstrap for angular ui.bootstrap。 使用popover指令，它将为您提供所需的效果。