Question

什么是带有引导程序的角度弹出窗口可以呈现html？我尝试了工具提示，但不会渲染html。

Answer 1

基本上，为了呈现HTML模板，您可以使用指令。请在下面找到两个plunker链接示例：

Tool tip PopOver Directive

参考代码：

@media (max-width: 900px) {
  .circle3 {
    right: 100px;
    top: 200px;
  }

  .circle2 {
    left: 350px;
  }

  .circle1, .circle2, .circle3 {
    left: 100px;
  }
}

Tool tip PopOver with $compile

参考代码：

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

        }
    }
});

用于角度的Bootstrap工具提示或弹出窗口？

1 个答案: