Javascript 角度ng show/ng hide不能正确使用ng bind html

我想在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);

$scope.my={
是的，
messageFalse:false
};
$scope.HtmlContent=“这是不正确的（ng show&my.messageFalse={{my.messageFalse}”）；
$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>

这是正确的（ng show&my.messageTrue={{my.messageTrue}）
这是正确的（ng hide&my.messageFalse={{my.messageFalse}}）

回答我的问题。（谢谢你的支持）

---

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

您是否在控制器中注入了$interpolate，并在模块中添加了ngSanitize

这是一个正在工作的plnkr：

//controller.js
var-app=角度。模块（“app”）；
应用控制器（“indexController”，indexController）；
函数索引控制器（$scope，$interpolate）{
$scope.my={
是的，
messageFalse:false
};
$scope.HtmlContent=“{{my.messageTrue}}”；
$scope.trustedHtml=$interpolate（$scope.HtmlContent）（$scope）；
}
//app.js
模块（'app'，['ngSanitize']）；
//index.html
{{my.messageTrue}}
{{1 + 1}}

关于使用ng bind html的链接：

$scope.my={message:false}；
$scope.HtmlContent=“{{my.message}}”；
$scope.trustedHtml=$interpolate（$scope.HtmlContent）（$scope）；

你应该试试这个：

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

{{my.message}

这是因为您正在注入的html尚未通过angular编译和链接，所以它只是“按原样”显示。如果您根本不包含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> 

---

这是工作报告

谢谢您的关注。我更新问题并为其添加Plnkr。请参阅本期：感谢您的关注和plnkr。我将HtmlContent从messageTrue更改为messageFalse，并使用ng显示HtmlContent可见，这是错误的，这是我的问题。请看这个plnkr：对不起，我误解了你的问题。看着乔·恩兹明格的回答，我现在明白你的意思了。这也为我的“武器库”增添了新的东西。谢谢看，这和你的情况很相似

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>