文章/答案/技术大牛

发布

社区首页 >问答首页 >Popover未将字符串绑定为html angularjs

问Popover未将字符串绑定为html angularjs
EN

Stack Overflow用户

提问于 2015-03-03 12:55:23

回答 1查看 984关注 0票数 2

我有以下代码。

<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="PopoverDemoCtrl">
     Hello, All
    <img class="tip" data-placement="bottom" src="http://static.loanstreet.com.my/assets/common/glasses.png" popover="{{my_html}}" popover-trigger="mouseenter">
</div>
  </body>
</html>

和js文件

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope) {
  $scope.my_html = '1. No Lock-In period &lt;br&gt;2. No withdrawals allowed (Non-Flexi) &lt;br&gt;3. For extra repayment to principal, minimum amount must be RM1000 and above &lt;br&gt;4. Only Non-ZEC option is available5. For completed or BUC property';
});

我想在底部显示popover模板，并显示' ‘显示时的样子。我希望字符串显示为HTML。Attavhed是我的plunkr文件。

http://plnkr.co/edit/1Ei09Mny89EbCUnLWgUX

twitter-bootstrap

javascript

angularjs

回答 1

Stack Overflow用户

发布于 2015-03-03 13:22:58

您需要覆盖popover的默认html模板，并使用$sce服务将html与其绑定。

对不安全的数据使用$sce：-

angular.module('ui.bootstrap.demo').filter('unsafe', ['$sce', function ($sce) {
    return function (val) {
        return $sce.trustAsHtml(val);
    };
}]);

覆盖默认弹出的模板：-

angular.module("template/popover/popover.html", []).run(["$templateCache", function ($templateCache) {
    $templateCache.put("template/popover/popover.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-html=\"title | unsafe\" ng-show=\"title\"></h3>\n" +
      "      <div class=\"popover-content\"ng-bind-html=\"content | unsafe\"></div>\n" +
      "  </div>\n" +
      "</div>\n" +
      "");
}]);

Plunker

Credits

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28824374

复制

相似问题

问Popover未将字符串绑定为html angularjs
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Popover未将字符串绑定为html angularjsEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Popover未将字符串绑定为html angularjs
EN