AngularJS绑定到Bootstrap Popover属性

Question

我正试图在AngularJS控制器中动态地填充来自JSON创建的Bootstrap弹出窗口的data-title和data-content。

控制器段：

$scope.popoverContent = {name: {title: "title", content: "content"}} 

HTML摘录：

 <span class="glyphicon glyphicon-question-sign" 
      aria-hidden="true" 
      data-toggle="popover" 
      data-trigger="hover" 
      data-title="{{popoverContent.name.title}}" 
      data-placement="right" 
      data-content="{{popoverContent.name.content}}"> 
     </span> 

我得到的HTML页面，{{popoverContent.name.title}}双引号之间的确切文本。

我试过ng-attr-data-title="{{popoverContent.name.title}}"，但在这种情况下，标题根本不显示。 控制器中设置的其他变量正在HTML页面中正确显示。

是可以实现这样的事情吗？

Answer 1

试试这个代码

var demo = angular.module('demo', []); 
 
demo.controller('loadData', function($scope){ 
 
    $scope.uploadData = function() { 
 
    $scope.popoverContent = {name: {title: "title", content: "content"}}; 
 
    }; 
 
}); 
 
demo.directive("popUps",function(){ 
 
\t return { 
 
    \t restrict:'E', 
 
    replace: true, 
 
    transclude: false, 
 
    template:'<span class="glyphicon glyphicon-question-sign" aria-hidden="true" data-toggle="popover" data-trigger="hover" data-title="{{popoverContent.name.title}}" data-placement="right" data-content="{{popoverContent.name.content}}">data-title:{{popoverContent.name.title}}</br>data-content:{{popoverContent.name.content}}</span>' 
 
    }; 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script> 
 
<div ng-app='demo'> 
 
\t <div ng-controller='loadData'> 
 
\t <button ng-click='uploadData($event)' >show</button> 
 
    <div> 
 
     <pop-ups></pop-ups> 
 
    </div> 
 
\t </div> 
 
\t </div>