Question

创建一个html popover

指令本身在路径中：

应用/脚本/指令/ popover.js

angular.module('c2gyoApp')
  .directive('tariffPopover', function () {
    return {
      restrict: 'A',
      transclude: true,
      scope: {
        text: '@tariffPopover'
      },
      template:
        '<span ng-transclude></span>' +
        '&nbsp;' +
        '<span popover-placement="right" ' +
        '      popover-template="pop.html" ' +
        '      popover-trigger="mouseenter" ' +
        '      class="fa fa-info-circle">' +
        '</span>'
    };
  });

pop.html是一个简单的html文件：

<h1>Hi</h1>

我在

的视图中使用它

应用/视图/ c2g.html

<div class="checkbox">
  <label>
    <input type="checkbox"
           ng-model="rental.airport">
    <span tariff-popover="{{info.airport}}">
      Flughafenpauschale
    </span>
    <br/>
  </label>
</div>

我无法弄清楚我必须放置pop.html模板的位置。我尝试了以下路径：

在应用 app / pop.html
与popover.js指令相同的目录 app / scripts / pop.html
与c2g.html视图相同的目录 app / views / pop.html

我还尝试将popover-template路径设置为 app / pop.html ， app / scripts / pop.html 和 app / views / pop.html 即可。然而，Popover没有弹出。什么是html模板的正确路径？

@Aviro将pop.html的内容更改为

<script type="text/ng-template" id="pop.html">
   <h1>Hi</h1>
</script>

无济于事。

Answer 1

popover-template需要是一个变量。这有效：

应用/视图/ c2g.html

<div class="checkbox"> <label> <input type="checkbox" ng-model="rental.airport"> <span tariff-popover="views/pop.html"> Flughafenpauschale </span> <br/> </label> </div>

应用/脚本/指令/ popover.js

angular.module('c2gyoApp') .directive('tariffPopover', function () { return { restrict: 'A', transclude: true, scope: { text: '@tariffPopover' }, template: '<span ng-transclude></span>' + ' ' + '<span popover-placement="right" ' + ' popover-template="text" ' + ' popover-trigger="mouseenter" ' + ' class="fa fa-info-circle">' + '</span>' }; });

Answer 2

如果您真的想要处理外部模板，可以在另一个HTML文件中定义它们（由另一个视图使用），如下所示。

<script type="text/ng-template" id="pop.html">
   <h1>Hi</h1>
</script>

可以根据需要调用并嵌入指令中。

我更喜欢更新指令，如下所示。

    angular.module('c2gyoApp')
      .directive('tariffPopover', function () {
        var getTemplate = function () {
            var template = '';
                template = $templateCache.get("pop.html");
            }
            return template;
        };

    return {
      restrict: 'A',
      transclude: true,
      scope: {
        text: '@tariffPopover'
      },
      link: function(scope, element, attrs) {
            var popOverContent = getTemplate();
            popOverContent = $compile("<div>" + popOverContent+"</div>")(scope);

            var options = {
                //title       : title,
                content     : popOverContent,
                placement   : "right",
                html        : true,
                date        : scope.date,
                trigger     : "hover"
            };
            $(element).popover(options);
      }
    };
  });

这是plunker，可能有助于更好地理解这一点。

Answer 3

属性popover采用您想要显示的实际文本。我认为这样可行（您可以在问题中链接的同一页面上找到示例）。

它看起来像这样：

angular.module('c2gyoApp')
  .directive('tariffPopover', function () {
    return {
      restrict: 'A',
      transclude: true,
      scope: {
        text: '@tariffPopover'
      },
      template:
        '<span ng-transclude></span>' +
        '&nbsp;' +
        '<span popover-placement="right" ' +
        '      popover="<h1>Hi</h1>" ' +
        '      popover-trigger="mouseenter" ' +
        '      class="fa fa-info-circle">' +
        '</span>'
    };
  });

另外，如果你仍然想把它放在一个单独的html文件上，我认为这个位置并不重要，也许你只是把你的路径弄错了，当我使用它时，它发生在我身上很多角。

在角度引导程序中将弹出模板的模板放在何处？

3 个答案: