angularJs 自定义指令不适用于 templateUrl

Question

我是 AngularJs 的新手。我正在编写我的自定义 angular 指令，其中包含一些 html 内容的模板。当我使用带有以下代码的模板时，它工作正常。

demoApp.directive('demoCarousel', function() {
  return {
    restrict: 'E',
    replace:'true',
    template: "<h1>This is from the custom directive..</h1>"
  };

});

但是，当我用 templateUrl 替换模板时指向部分内的 html，我收到错误。

demoApp.directive('demoCarousel', function() {
  return {
    restrict: 'E',
    replace:'true',
    templateUrl: "/partials/carousel.html"
 };

});

javascript错误类似于:

Error: [$compile:tplrt] http://errors.angularjs.org/1.2.15/$compile/tplrt?p0=glassCarousel&p1=%2Fpartials%2Fcarousel.html

请让我知道我哪里出错了以及使用 templateUrl 的正确方法是什么

注意:我在 carousel.html 文件中只使用纯 html 代码。

Answer 1

error说:Template for directive 'glassCarousel' must have exactly one root element. /partials/carousel.html
这意味着你的模板中有这样的东西:

<div>...</div>
<div>...</div>

这是不允许的，你应该有一个根元素:

<div>
    <div>...</div>
    <div>...</div>
</div>