Question

我使用Angular UI Bootstrap指令来显示一个用作下拉菜单的popover。如果我为内容指定HTML模板（使用属性popover-template），我可以使用可点击的链接调用我的指令上的函数来更改值。但是，现在我需要能够动态指定选项，所以我尝试创建HTML列表并将其传递给＆＃34; popover＆＃34;在我的指令的链接功能中的属性。这是有效的，因为它正确地显示了popover中的HTML，但链接不可点击，因为它们位于ng-bind-html不安全容器中。我已经尝试编译HTML字符串，我将传递给＆＃34; popover＆＃34;属性，但它打印[对象对象]。

这是我的指示：

    MyApp.directive('dropDown', ['$compile', function($compile){
return{
    restrict:'EA',
    replace:true,
    transclude:true,
    scope:{
         value : '@',
         options : '='
    },
    controller: function($scope, $element) {
        $scope.doSelect = function(option, text){
            alert(option);
        }

    },
    template: '<div>'+
                '<button class="btn btn-dropdown" data-html="true" popover-append-to-body="true" popover-placement="bottom"  popover-trigger="click">'+
                    '{{value}}'+
                '<span class="icon-triangle-down"></span></button>' +       
            '</div>',   

    link: function (scope, elem, attrs) {
        scope.list = '<ul class="dropdown">';
        for (opt in scope.options){
            if(scope.options.hasOwnProperty(opt)){
                scope.list+='<li><a ng-click="doSelect(\''+opt+'\', \''+scope.options[opt]+'\');">'+scope.options[opt]+'</a></li>';
            }
        }
        scope.list += '</ul>';
        var but = elem.find("button");
        var template = $compile(scope.list)(scope);
        //$(but).attr('popover', template);        // prints [object Object] instead of compiled html
        $(but).attr('popover', scope.list);    // prints html not bound to scope and therefore not clickable
        $compile(elem.contents())(scope);

    }
}}]);

我创造了一个小提琴来说明问题： http://jsfiddle.net/CaroD/7B5qB/3/

那么：有没有办法编译这个HTML所以它可以与范围进行交互，或者我采取了一种完全错误的方法？

欢迎所有建议，谢谢！

Answer 1

如果不是这样的大指令，您是否尝试使用工具提示提供程序的html-unsafe属性？它为您提供了将html文本放入popover的可能性，因此您肯定会与它进行交互。

将HTML绑定到Angular UI弹出窗口中的范围

1 个答案: