Question

Angular版本1.4

所以我有这个代码 html

 <div>{{ isConditionTrue() ? '<p>Some content<p>' : '<p>some other content</p>'}}</div>

component.js

$scope.isCondition = function(){
    return true;// lets say.
}

但是在UI上，整个插值都以字符串形式出现

 <div>"{{ isConditionTrue() ? '<p>Some content<p>' : '<p>some other content</p>'}}"</div>

更新：

值有时是字符串，有时是html。那么如何使其通用。有人帮助！！！ T_T

Answer 1

您需要使用ng-bind-html。

查看

 <div ng-bind-html="isConditionTrue()"></div>

JS

$scope.isConditionTrue = function() {
   if (true) {
     return '<p>IF content<p>';
   } else {
     return '<p>ELSE content<p>';
  }
}

让我知道您是否遇到任何问题。

Answer 2

在这种情况下，您需要在 ngSanitize 库的帮助下使用 ng-bind-html 指令，该指令可帮助您以安全的方式呈现html。 / p>

var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
    $scope.isCondition = function(){return true;}
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-bind-html="isCondition() ? '<p>Some content</p>' : '<p>Some other content</p>'">
  </div>
</div>
</body>
</html>

HTML上的插值内容以字符串格式显示

2 个答案: