Skip to content Skip to sidebar Skip to footer

Angular Ng-show / Ng-hide Not Working Correctly With Ng-bind-html

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 co

Solution 1:

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.

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

And here is the working Plunk

Solution 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 = "<divng-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><bodyng-app="app"ng-controller="indexController"><divng-show="my.messageTrue">{{my.messageTrue}}</div><divng-show="my.messageFalse">{{1 + 1}}</div><divng-bind-html="trustedHtml"></div><scriptdata-require="angular.js@*"data-semver="1.4.0-beta.4"src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script><scriptsrc="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-sanitize.js"></script><scriptsrc="app.js"></script><scriptsrc="controller.js"></script></body></html>

and this link on using ng-bind-html: How to output html through AngularJS template?

Solution 3:

$scope.my = { message: false };
$scope.HtmlContent = "<div ng-show='{{my.message}}'>{{my.message}}</div> ";
$scope.trustedHtml = $interpolate($scope.HtmlContent)($scope);

You should try this :

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

Post a Comment for "Angular Ng-show / Ng-hide Not Working Correctly With Ng-bind-html"