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

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

Это мой код controllerа:

$scope.my = { messageTrue: true, messageFalse: false }; $scope.HtmlContent = "
This is incorrect (ng-show & my.messageFalse={{my.messageFalse}})
"; $scope.trustedHtml = $interpolate($scope.HtmlContent)($scope);

И это мой код:

 
This is correct (ng-show & my.messageTrue={{my.messageTrue}})
This is correct (ng-hide & my.messageFalse={{my.messageFalse}})

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

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

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

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

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

Вот код:

 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); }); } } }); 

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

 

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

Вы вводили интерполяцию $ в controller, а также добавили 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 = "
{{my.messageTrue}}
"; $scope.trustedHtml = $interpolate($scope.HtmlContent)($scope); } // app.js angular.module('app', ['ngSanitize']); // index.html < !DOCTYPE html>
{{my.messageTrue}}
{{1 + 1}}

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

 $scope.my = { message: false }; $scope.HtmlContent = "
{{my.message}}
"; $scope.trustedHtml = $interpolate($scope.HtmlContent)($scope);

Вы должны попробовать следующее:

 
{{my.message}}