Question

我有一个新的指令（showfor），使用angular和bootstrap在我的UI中启用popover。＆＃34; showfor＆＃34;指令在html内部工作，但不在数据内容中。我需要popover来显示列表（而不是整个数组）。任何形式的帮助将不胜感激。

代码是：

＆＃13;

'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"
  }];

});

＆＃13;

<!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>

＆＃13;

请参阅演示的plunkr链接：https://plnkr.co/edit/aJF4QIlGbMdpHZAvU8m9?p=preview

Answer 1

数据内容中的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

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

1 个答案: