Угловой ng-show / ng-hide не работает правильно с ng-bind-html

Я хочу установить ng-show или ng-hide для моих элементов в html-строке и передать его для просмотра с помощью ng-bind-html, но ng-show / ng-hide не работает, и мой элемент всегда видим.

Это мой код контроллера:

  $scope.my = {
    messageTrue: true,
    messageFalse: false
  };

  $scope.HtmlContent = "<div ng-show='{{my.messageFalse}}'>This is incorrect (ng-show & my.messageFalse={{my.messageFalse}})</div> ";
  $scope.trustedHtml = $interpolate($scope.HtmlContent)($scope);

И это мой вид кода:

<div ng-show="my.messageTrue">This is correct (ng-show & my.messageTrue={{my.messageTrue}})</div>
<div ng-hide="my.messageFalse">This is correct (ng-hide & my.messageFalse={{my.messageFalse}})</div>
<div ng-bind-html="trustedHtml"></div>

Это Plnkr для моего вопроса. (Спасибо за Xaero)

Извините за мой плохой английский. Спасибо

Источник

3 ответа

Решение

Это связано с тем, что HTML-код, который вы вводите, еще не скомпилирован и не связан угловым, поэтому он просто отображается "как есть". Он обрабатывается так же, как и ваша разметка, если вы вообще не включали angular.js.

Решением является создание директивы, которая работает аналогично ng-bind-html, но также включает в себя этап компиляции и компоновки фрагмента html.

Эта ссылка является примером такой директивы.

Вот код:

angular.module('ngHtmlCompile', []).
    directive('ngHtmlCompile', function($compile) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            scope.$watch(attrs.ngHtmlCompile, function(newValue, oldValue) {
                element.html(newValue);
                $compile(element.contents())(scope);
            });
        }
    }
});

и использование.

<div ng-html-compile="trustedHtml"></div>

А вот и рабочий Plunk

Источник

Вы внесли $interpolate в контроллер, а также добавили ngSanitize в модуль?

Вот рабочий plnkr: http://plnkr.co/edit/qTsUzi04tCNdK5BAZvDa?p=preview

// controller.js
var app = angular.module('app');

app.controller('indexController', indexController);

function indexController($scope, $interpolate) {
  $scope.my = {
    messageTrue: true,
    messageFalse: false
  };

  $scope.HtmlContent = "<div ng-show='{{my.messageTrue}}'>{{my.messageTrue}}</div> ";
  $scope.trustedHtml = $interpolate($scope.HtmlContent)($scope);
}

// app.js
angular.module('app', ['ngSanitize']);

// index.html
<!DOCTYPE html>
<html>
<head></head>

<body ng-app="app" ng-controller="indexController">
<div ng-show="my.messageTrue">{{my.messageTrue}}</div>
<div ng-show="my.messageFalse">{{1 + 1}}</div>

<div ng-bind-html="trustedHtml"></div>

<script data-require="angular.js@*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-sanitize.js"></script>
<script src="app.js"></script>
<script src="controller.js"></script>
</body>
</html>

и эта ссылка на использование ng-bind-html: как вывести html через шаблон AngularJS?

Источник 
$scope.my = { message: false };
$scope.HtmlContent = "<div ng-show='{{my.message}}'>{{my.message}}</div> ";
$scope.trustedHtml = $interpolate($scope.HtmlContent)($scope);

Вы должны попробовать это:

<div ng-show="my.message == false">{{my.message}}</div> 
<div ng-bind-html="trustedHtml"></div>
Источник
Другие вопросы по тегам