Тернарное утверждение с элементами HTML - PullRequest
Новая
       1

Тернарное утверждение с элементами HTML

0 голосов
/ 08 июня 2018

Я пытаюсь создать троичный оператор, который также использует элементы HTML: 

{{vm.showDetails ? <span>asd</span> : <span>red</span> }}

Но вывод браузера: 

{{vm.showDetails ? 'asd' : 'red'}}

Если я удаляю теги, тогда троичныйоператор отлично работает, нельзя ли использовать элементы HTML внутри троичного оператора?

1 Ответ

0 голосов
/ 08 июня 2018

Для рендеринга таких HTML-элементов при некоторых условиях вам понадобится либо директива с $compile (поскольку они отвечают за манипуляции с DOM), либо использование хака - ng-bind-html из ngSanitize модуля.

Вот пример: 

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

/* a useful filter for other unsafe HTML elements */
app.filter('trustAsHtml', function($sce) {
  return $sce.trustAsHtml;
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.9/angular-sanitize.js"></script>

<body>
  <div ng-app="myApp" ng-controller="myCtrl as vm">

    <input type="checkbox" ng-model="vm.showDetails" />
    vm.showDetails
    <hr>

    <div ng-bind-html="vm.showDetails ? '<span>asd</span>' : '<span>red</span>'"></div>

  </div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...