在popover数据内容中调用angular js的自定义指令答案

【问题标题】：calling custom directive of angular js inside popover data-content在popover数据内容中调用angular js的自定义指令
【发布时间】：2025-11-28 20:30:01
【问题描述】：

我编写了一个新指令 (showfor) 以使用 angular 和 bootstrap 在我的 UI 中启用 popover。 “showfor”指令在 html 中有效，但在数据内容中无效。我需要弹出框来显示列表（而不是整个数组）。任何形式的帮助将不胜感激。

代码是：

'use strict';
var isbnApp = angular.module('plunker', []);

isbnApp.directive('mypopover', function() {
  return function(scope, element) {
    element.popover();
  };
});

isbnApp.directive('showfor',function(){
  return{
    restrict:"AEC",
    template:"<li data-ng-repeat='item in records'>{{item.imageType}}</li>"
  };
});

isbnApp.controller('popCtrl', function($scope) {
  $scope.records = [{
    "imageType": "JPEG",
    "rendition": "cover_80"
  }, {
    "imageType": "TIFF",
    "rendition": "cover_20"
  }];

});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>Content Discovery</title>
  <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script data-require="angular.js@*" data-semver="1.6.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.9/js/tether.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
  <script src="app.js"></script>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
</head>

<body>
  <div class="container" data-ng-controller="popCtrl">
    <br />
    <a mypopover="" tabindex="0" role="button" 
    class="btn btn-primary btn-sm" 
    data-container="body" data-toggle="popover" 
    data-html="true" title="<b>Coltrane Data</b>" 
    data-content="<showfor></showfor>">
              Coltrane
      </a>
    <showfor></showfor>
  </div>
</body>

</html>

查看演示链接：https://plnkr.co/edit/aJF4QIlGbMdpHZAvU8m9?p=preview

【问题讨论】：

如果你给data-content="<showfor>{{passengers}}</showfor>"它会显示列表，这是你想要的吗？
嗨@NarenMurali，不，我希望指令显示迭代数组而不是数组本身的列表。

标签： angularjs angularjs-ng-repeat popover bootstrap-4 custom-directive

【解决方案1】：

data-content 中的 html 没有被编译，所以我们需要添加一个 angular 指令来执行此操作。

正确的指令取自以下链接，也请查看参考链接

.directive('popover', function($compile, $timeout){
  return {
    restrict: 'A',
    link:function(scope, el, attrs){
      var content = attrs.content; //get the template from the attribute
      var elm = angular.element('<div />'); //create a temporary element
      elm.append(attrs.content); //append the content
      $compile(elm)(scope); //compile 
      $timeout(function() { //Once That is rendered
        el.removeAttr('popover').attr('data-content',elm.html()); //Update the attribute
        el.popover(); //set up popover
       });
    }
  }
})

JSFiddle：https://jsfiddle.net/Kai_Draord/b9eogz1v/1/

参考： angular bootstrap popover

【讨论】：