Question

我正在尝试从AngularJS控制器中的JSON创建动态填充Bootstrap popover的data-title和data-content。

Controller Snippet：

$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

试用此代码

＆＃13;

var demo = angular.module('demo', []);
demo.controller('loadData', function($scope){
   $scope.uploadData = function() {
    $scope.popoverContent = {name: {title: "title", content: "content"}};
   };
});
demo.directive("popUps",function(){
	return {
  	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>'
  };
})

＆＃13;

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

＆＃13;

AngularJS绑定到Bootstrap Popover属性

1 个答案: