角度NG-显示/ NG隐藏与吴先生绑定HTML的正常工作 [英] angular ng-show / ng-hide not working correctly with ng-bind-html

问题描述

我想设置NG-显示或NG-躲我在HTML字符串元素，并通过它来查看与NG绑定，HTML，但NG-显示/ NG隐藏不工作，我的元素总是可见的。

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.

这是我的控制器code：

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

这是我的看法code：

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>

这是我的问题Plnkr 。 （感谢 Xaero ）

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

Sorry for my bad English. Thanks

推荐答案

这是因为你注入HTML尚未编制和角度联系在一起，因此它只是显示原样。它正在接受治疗，如果你根本不包括angular.js您的标记将被视为相同的方式。

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". It's being treated the same way your markup would be treated if you didn't include angular.js at all.

解决方案是创建一个工作原理类似NG-绑定HTML的指令，但也包括了编译和链接的HTML片段的一步。

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.

此链接是这种指令的一个例子。

This link is an example of such a directive.

下面是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);
            });
        }
    }
});

和的使用。

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

和这里的工作普拉克

这篇关于角度NG-显示/ NG隐藏与吴先生绑定HTML的正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！