角度 ng-show / ng-hide 无法与 ng-bind-html 一起正常工作答案

【问题标题】：angular ng-show / ng-hide not working correctly with ng-bind-html角度 ng-show / ng-hide 无法与 ng-bind-html 一起正常工作
【发布时间】：2015-02-09 14:33:00
【问题描述】：

我想在 html 字符串中为我的元素设置 ng-show 或 ng-hide 并使用 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>

This is a Plnkr 我的问题。（感谢Xaero）

对不起，我的英语不好。谢谢

【问题讨论】：

看看这个post和你的情况相似

标签： javascript html angularjs angularjs-directive angularjs-scope

【解决方案1】：

这是因为你注入的 html 还没有被 Angular 编译和链接，所以它只是“按原样”显示。如果您根本不包含 angular.js，它的处理方式与处理您的标记的方式相同。

解决方案是创建一个类似于 ng-bind-html 的指令，但其中还包括编译和链接 html 片段的步骤。

This link 是此类指令的一个示例。

代码如下：

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

【讨论】：

【解决方案2】：

你是否在控制器中注入了$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 的链接：How to output html through AngularJS template?

【讨论】：

感谢您的关注和 plnkr。我将 HtmlContent 从 messageTrue 更改为 messageFalse 并且使用 ng-show HtmlContent 可见，这是错误的，这是我的问题。看到这个plnkr：plnkr.co/edit/tbmULwHdAimLoXJGLnEb?p=preview
对不起，我误解了你的问题。看看乔恩兹明格的回答，我现在明白你的意思了。这也为我的 Angular“武器库”添加了一些新内容。谢谢！

【解决方案3】：

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

【讨论】：

感谢您的关注。我更新问题并为其添加 Plnkr。请看问题：plnkr.co/edit/tbmULwHdAimLoXJGLnEb?p=preview