javascript - angular ng-show/ng-hide 不能与 ng-bind-html 一起正常工作

Question

我想在 html 字符串中为我的元素设置 ng-show 或 ng-hide，并将其传递给 ng-bind-html 查看，但 ng-show/ng-hide 不起作用，我的元素始终可见。

这是我的 Controller 代码:

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

这是我的 View 代码:

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

抱歉我的英语不好。谢谢

Answer 1

这是因为您注入(inject)的 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