Angularjs &引用；扩展；角度用户界面引导弹出窗口

（我对AngularJS有点陌生）

我想创建一个指令，当用户单击放置该指令的元素时，它会触发引导弹出框。To popover将在my指令中生成一个HTML内容，此HTML中的元素将具有ng click指令

我认为“普通jQuery”应该是

element.popover({
  content: myGeneratedContent
})
.popover('show');

// some code to attach events to the content

但我真的不知道如何用Angular UI实现这一点。有线索吗

谢谢

--

---

我想做的是一个按钮，显示所有可用的笑脸，然后单击，将相应的短代码添加到绑定的模型中。

ui引导文档非常好。然而，你说你想把html放在你的popover里。ui引导弹出窗口不支持此功能。在我们的项目中，我们在一个单独的模块中添加了一些“额外的”popover内容，也许您也可以尝试类似的内容

.directive( 'popoverHtmlPopup', [ function() {
    return {
        restrict: 'EA',
        replace: true,
        scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' },
        templateUrl: 'template/popover/popover-html.html'
    };
}])
.directive( 'popoverHtml', [ '$compile', '$timeout', '$parse', '$window', '$tooltip', function ( $compile, $timeout, $parse, $window, $tooltip ) {
    return $tooltip( 'popoverHtml', 'popover', 'click' );
}])

当然，您也需要模板：

angular.module("template/popover/popover-html.html", []).run(["$templateCache",     function($templateCache) {
    $templateCache.put("template/popover/popover-html.html",
            "<div class=\"popover {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" +
            "  <div class=\"arrow\"></div>\n" +
            "\n" +
            "  <div class=\"popover-inner\">\n" +
            "      <h3 class=\"popover-title\" ng-bind=\"title\" ng-show=\"title\"></h3>\n" +
            "      <div class=\"popover-content\" ng-bind-html=\"content\">    </div>\n" +
            "  </div>\n" +
            "</div>\n" +
            "");
}]);

angular.module（“template/poover/popover html.html”，[]）。运行（[“$templateCache”，函数（$templateCache）{
$templateCache.put（“template/popover/popoover html.html”，
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
"");
}]);

然后像这样使用它：

<i title="View More Info" class="icon-info-sign"
       data-popover-html="varWithHtml"
       data-popover-title="More Info">
</i>

---

ui引导popover支持HTML模板，可以包含ng click

用属性替换默认模板

popover-template="nameOfYourTemplate.html"

---

似乎我还不够清楚，我的问题是（还没有）在popover bu中添加HTML，以根据我自己的指令创建popover

这是一种方法：

.directive('myDirective', function() {
    return {
        restrict: 'A',
        template: '<span popover="content" popover-title="title"></span>',
        link: function($scope) {
            $scope.content = '.....';
            $scope.title = '.....';
        }
    };
})

.directive（'myDirective'，function（）{
返回{
限制：“A”，
模板：“”，
链接：功能（$scope）{
$scope.content='…'；
$scope.title=“…”；
}
};
})

关于HTML内容，Chi Row给出了一个还不适用于官方版本的解决方案（在fork上提供）

---

aet版本也适用于当前版本

您尝试了什么？这听起来不太可怕。有一个popover指令。这个问题可能会有所帮助：似乎我还不够清楚，我的问题是（还没有）在popover bu中添加HTML以根据我自己的指令创建popover（请参见我的答案）。不幸的是，bootstrap bower jbruni解决方案不适用于angular versions>1.3.0（1.3.0确实有效）它是在0.13.0版本中发布的