Question

我刚安装了角带，我尝试了一些功能。我有一个模态功能，但内容不会呈现<br />元素，它会将其呈现为文本。我不明白为什么，文档显示它工作正常。据我所知，我正确地做了一切。

任何人都可以发现我的代码有任何问题吗？我尽可能地把它剥光了。我以前做过ngAnimate和ngSanitize。

var app = angular.module('app', ['mgcrea.ngStrap'])
.controller('myCtrl', function($scope) {
    $scope.modal = {
      "title": "Title",
      "content": "Hello Modal <br/> This is a multiline message!"
    };
});




<html ng-app="app">
    <head>

        <script src="bower_components/angular/angular.js"></script>
        <script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
        <script src="bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>
        <script src="//cdn.jsdelivr.net/angularjs/1.4.2/angular-animate.min.js" data-semver="1.4.2"></script>
        <script src="//cdn.jsdelivr.net/angularjs/1.4.2/angular-sanitize.min.js" data-semver="1.4.2"></script>
        <script src="app.js"></script>
    </head>
    <body>
        Angular Strap

        <div ng-controller="myCtrl">
        <!-- Button to trigger a default modal with a scope as an object {title:'', content:'', etc.} -->
        <button type="button" class="btn btn-lg btn-primary" data-animation="am-fade-and-scale" data-placement="center" bs-modal="modal">Click to toggle modal
          <br>
          <small>(using an object)</small>
        </button>
        </div>
    </body>
</html>

Answer 1

您的问题可能与Angular在显示以编程方式获取的任何变量时不解释HTML代码有关。

你应该看一下这个指令：https://docs.angularjs.org/api/ng/directive/ngBindHtml，它可以解决你的问题！

Answer 2

我现在已经开始工作了。

根据文件： replace ng-bind with ng-bind-html, requires ngSanitize to be loaded

我按照文档中的plunkr设置了一个选项，我的代码现在看起来像这样：

var app = angular.module('app', ['ngAnimate','ngSanitize', 'mgcrea.ngStrap'])

.config(function($modalProvider) {
  angular.extend($modalProvider.defaults, {
    html: true
  });
})


.controller('myCtrl', function($scope) {
    $scope.modal = {
      "title": "Title",
      "content": "Hello Modal <br/> This is a multiline message!"
    };
});

Angular-strap：html元素呈现为文本，为什么？

2 个答案: