4

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.

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. (Thanks for Xaero)

Sorry for my bad English. Thanks

Community
  • 1
  • 1
b24
  • 2,425
  • 6
  • 30
  • 51
  • look this [post](http://stackoverflow.com/questions/40024415/using-ng-bind-html-and-sce-trustashtml-create-a-string-with-ng-model-binding/40024560#40024560) is similar with your case – GomuGomuNoRocket Oct 14 '16 at 11:22

3 Answers3

6

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.

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.

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

Joe Enzminger
  • 11,110
  • 3
  • 50
  • 75
2

Have you injected $interpolate in the controller, and also added ngSanitize in the module?

Here's a working 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?

Community
  • 1
  • 1
Xaero
  • 51
  • 4
  • Thanks for your attention and plnkr. I change HtmlContent from messageTrue to messageFalse and with ng-show HtmlContent is visible that is wrong and this is my question. See this plnkr: http://plnkr.co/edit/tbmULwHdAimLoXJGLnEb?p=preview – b24 Feb 10 '15 at 05:11
  • Sorry I misunderstood your question. Looking at Joe Enzminger's answer I now understand what you mean. This has added something new to my Angular 'arsenal' as well. Thanks! – Xaero Feb 10 '15 at 13:23
1
$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>
Rajshree Soni
  • 23
  • 1
  • 4
  • Thanks for your attention. I update question and add a Plnkr for it. Please see the issue: http://plnkr.co/edit/tbmULwHdAimLoXJGLnEb?p=preview – b24 Feb 10 '15 at 05:10