ng-bind-html funktioniert nicht

Question

Ich versuche, HTML in mein div einzufügen (unten im Code). Ich habe mich schon einmal mit einem solchen Problem beschäftigt, also habe ich einen Filter hinzugefügt. Wenn das div jedoch über eine Umschaltfunktion sichtbar gemacht wird, wird der HTML-Code nicht vom Dienst angezeigt. Ich habe überprüft, dass der Dienst den richtigen HTML-Code zurückgibt.

Das Div ist eingeblendet, aber es wird kein HTML angezeigt.

Angular Code:

var myApp = angular.module('myApp', []); 
angular.module('myApp').filter('unsafe', function ($sce) { 
    return function (val) { 
     if ((typeof val == 'string' || val instanceof String)) { 
      return $sce.trustAsHtml(val); 
     } 
    }; 
}); 




myApp.controller('myAppController', function ($scope, $http) { 
... 
SERVICE CODE 
... 

$scope.toggleHTMLResults(); 
$scope.HTMLjson = obj[0].HTML;  

HTML-Code:

<div id="returnedHTML" ng-bind-html="HTMLjson | unsafe " ng-hide="HTMLResults">NOT HIDDEN</div> 

Ich bin mir nicht sicher, warum dies nicht funktioniert.

Hier ist meine Plunker

Answer 1

Es mit Ihrem Beispiel mehrere Dinge falsch waren.

• Haupt Javascript-Datei deklariert zweimal, zuerst in Kopf- und zweiten vor dem Schließen auf Body-Tag
• Sie eine Funktion als HTMLAPI() rufen statt $scope.HTMLAPI()
• Ihre $scope.HTMLAPI() Funktion auch, bevor es
genannt wurde initialisiert wurde

Fest Controller-Code:

app.controller('myAppCTRL', ['$scope', '$http', function ($scope, $http) { 

    var API = this; 
    $scope.HTMLInput = true; 
    $scope.HTMLResults = true; 

    $scope.toggleHTMLInput = function() { 
     $scope.HTMLInput = $scope.HTMLInput === false ? true : false; 
    } 

    $scope.toggleHTMLResults = function() { 
     $scope.HTMLResults = $scope.HTMLResults === false ? true : false; 
    } 

    $scope.HTMLAPI = function (HTML) { 
      var newJSON = ["[{\"ConditionId\":1111,\"ConditionDescription\":\"<i>DATA GOES HERE</i>\",\"ErrorId\":0,\"DisplayId\":0,\"DisplayName\":\"\",\"ErrorValue\":\"\"}]"]; 
      var obj = JSON.parse(newJSON); 
      $scope.HTMLjson = obj[0].ConditionDescription; 
      $scope.toggleHTMLResults(); 

      console.log($scope.HTMLjson); 
    } 

    $scope.HTMLAPI(); 
}]); 

Working Example