將HTML綁定到Angular UI中的作用域popup

我正在使用Angular UI Bootstrap指令來顯示用作下拉菜單的彈出窗口。如果我爲內容指定了HTML模板（使用屬性popover-template），我可以使用可點擊的鏈接調用我的指令中的函數來更改值。但是，現在我需要能夠快速指定選項，所以我嘗試創建HTML列表並將其傳遞給我的指令的鏈接函數中的「popover」屬性。這可以正常工作，因爲它正確顯示了彈出窗口中的HTML，但鏈接不可點擊，因爲它們位於ng-bind-html不安全容器內。我試過編譯我傳遞給「popover」屬性的HTML字符串，但它打印了[object Object]。將HTML綁定到Angular UI中的作用域popup

這裏是我的指令：

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，因此它可以與範圍進行交互，還是我在這裏採取了完全錯誤的方法？

所有建議最受歡迎，謝謝！

來源

2014-04-16 CaroD

不要這樣的大指令，你有沒有嘗試使用工具提示提供程序的html-unsafe屬性？它給你提供了將HTML文本放入彈出窗口的可能性，所以你肯定會與它進行交互。

來源

2014-04-16 15:36:07 mautrok

嗨，我使用的HTML不安全，這就是爲什麼我不能綁定HTML中的點擊事件。 – CaroD

將HTML綁定到Angular UI中的作用域popup

回答

相關問題