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

Question

我编写了一个新指令 (showfor) 以使用 angular 和 bootstrap 在我的 UI 中启用弹出窗口。 "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>

有关演示，请参阅 plunkr Link：https://plnkr.co/edit/aJF4QIlGbMdpHZAvU8m9?p=preview

Answer 1

数据内容中的 html 未被编译，因此我们需要添加一个 angular 指令来执行此操作。

正确的指令取自下面 link，查看参考资料 link 也

.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

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

calling custom directive of angular js inside popover data-content

angularjs

angularjs-ng-repeat

popover

bootstrap-4

custom-directive