ng-bind-htmlが動作しません

Question

私のdiv（コードの一番下）にHTMLを挿入しようとしています。私は前にこのような問題に取り組んだので、フィルタを追加しました。ただし、divがトグル機能で表示されると、HTMLはサービスから表示されません。サービスが適切なHTMLコードを返すことを確認しました。

divは表示されませんが、htmlは表示されません。

角度コード：

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コード：これが機能しない理由

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

私はわかりません。ここで

はあなたの例と間違って複数のものがありました私のPlunker

Answer 1

です。

• メインのJavascriptファイルは、最初のヘッダーには、2回宣言と第二の近くbodyタグの前
• あなたはHTMLAPI()としての機能を呼び出す代わりに、それは
を初期化する前にあなたの $scope.HTMLAPI()機能とも呼ばれていた
• $scope.HTMLAPI()

固定コントローラコード：

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