引導工具提示或彈出對角？

Question

什麼是可以渲染html的自舉彈出窗口？我嘗試了工具提示，但不會呈現HTML。

Answer 1

基本上呈現，你可以使用一個directive.Please在下面找到plunker鏈接的兩個例子，一個HTML模板：

1. Tool tip PopOver Directive

參考代碼：

var directives = angular.module('directives', []); 
directives.directive('testDirective', function($compile) { 
    return { 
     restrict: 'EAC', 
     template: "<a id='pop-over-link' style='position: fixed; top: 100px; left: 100px;'>Show pop-over</a>" + 
        "<div id='pop-over-content' style='display:none'><button class='btn btn-primary' ng-click='testFunction()'>Ok</button></div>", 
     link: function(scope, elements, attrs) { 
      $("#pop-over-link").popover({ 
       'placement': 'top', 
       'trigger': 'click', 
       'html': true, 
       'container': 'body', 
       'content': function() { 
        return $compile($("#pop-over-content").html())(scope); 
       } 
      }); 

      scope.testFunction = function() { 
       alert("it works"); 
       console.log("maybe"); 
      } 

     } 
    } 
}); 

Tool tip PopOver with $compile

參考代碼：

bootstrap.directive('popOver', function ($compile) { 
     var itemsTemplate = "<ul class='unstyled'><li ng-repeat='item in items'>{{item}}</li></ul>"; 
     var getTemplate = function (contentType) { 
      var template = ''; 
      switch (contentType) { 
       case 'items': 
        template = itemsTemplate; 
        break; 
      } 
      return template; 
     } 
     return { 
      restrict: "A", 
      transclude: true, 
      template: "<span ng-transclude></span>", 
      link: function (scope, element, attrs) { 
       var popOverContent; 
       if (scope.items) { 
        var html = getTemplate("items"); 
        popOverContent = $compile(html)(scope);      
       } 
       var options = { 
        content: popOverContent, 
        placement: "bottom", 
        html: true, 
        title: scope.title 
       }; 
       $(element).popover(options); 
      }, 
      scope: { 
       items: '=', 
       title: '@' 
      } 
     }; 
    });