使用ng-bind-html，角度ng-show / ng-hide无法正常工作

Question

I want to set ng-show or ng-hide for my elements in html string and pass it to view with ng-bind-html but ng-show / ng-hide not working and my element always visible. 我想为html字符串中的元素设置ng-show或ng-hide，并使用ng-bind-html将其传递给视图但ng-show / ng-hide不起作用且我的元素始终可见。

This is my controller code: 这是我的控制器代码：

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

And this is my view code: 这是我的查看代码：

<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>

This is a Plnkr for my question. 对于我的问题，这是一个Plnkr 。 (Thanks for Xaero ) （感谢Xaero ）

Sorry for my bad English. 对不起，我的英语不好。 Thanks 谢谢

Answer 1

This is because the html you are injecting has not yet been compiled and linked by angular, so it is just being displayed "as is". 这是因为您注入的html尚未按角度编译和链接，因此它只是“按原样”显示。 It's being treated the same way your markup would be treated if you didn't include angular.js at all. 如果你根本没有包含angular.js，它的处理方式与你的标记处理方式相同。

The solution is to create a directive that works similar to ng-bind-html, but that also includes a step for compiling and linking the html fragment. 解决方案是创建一个类似于ng-bind-html的指令，但它还包括编译和链接html片段的步骤。

This link is an example of such a directive. 此链接是此类指令的示例。

Here is the code: 这是代码：

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

and the usage. 和用法。

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

And here is the working Plunk 这是工作的普朗克

Answer 2

Have you injected $interpolate in the controller, and also added ngSanitize in the module? 您是否在控制器中注入了$ interpolate，并在模块中添加了ngSanitize？

Here's a working plnkr: http://plnkr.co/edit/qTsUzi04tCNdK5BAZvDa?p=preview 这是一个有效的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>

and this link on using ng-bind-html: How to output html through AngularJS template? 和使用ng-bind-html的这个链接：如何通过AngularJS模板输出html？

Answer 3

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

You should try this : 你应该试试这个：

<div ng-show="my.message == false">{{my.message}}</div> 
<div ng-bind-html="trustedHtml"></div>

使用ng-bind-html，角度ng-show / ng-hide无法正常工作

问题描述

3 个解决方案

解决方案1
5 已采纳 2015-02-10 05:12:50

解决方案2
2 2015-02-09 15:34:31

解决方案3
1 2015-02-09 15:53:39

使用ng-bind-html，角度ng-show / ng-hide无法正常工作

问题描述

3 个解决方案

解决方案1 5 已采纳 2015-02-10 05:12:50

解决方案2 2 2015-02-09 15:34:31

解决方案3 1 2015-02-09 15:53:39

解决方案1
5 已采纳 2015-02-10 05:12:50

解决方案2
2 2015-02-09 15:34:31

解决方案3
1 2015-02-09 15:53:39