AngularJS: ng-bind-html abhängig von der Variablen

Question

Ich möchte etwas HTML in einer Szene anzeigen (ein Bild von einem Mann oder einer Frau), abhängig vom Geschlecht der Person, die auf meiner Website eingeloggt ist. Die Anweisung ng-bind-html funktioniert, wenn ich "imageToLoad" statisch definiere. Es funktioniert jedoch nicht, wenn meine zu bindende HTML-Datei durch eine Funktion definiert ist.

Die Konsole sagt mir: Typeerror: $ scope.getHtml ist keine Funktion

Hier ist meine vereinfachte Code:

HTML:

<div id="img-container" ng-controller="sceneCtrl" ng-bind-html="imgToLoad"> 
</div> 

JS:

.controller('sceneCtrl', function($scope, $http, $sce){ 
    /* This works 
    ** $scope.imgToLoad = $sce.trustAsHtml('<img id="over2" src="imgMale.png"/>'); 
    */ 

    $scope.imgToLoad=$scope.getHtml(); 

    $scope.getHtml=function(){ 

     var gender='male'; 
     if(gender=='male'){ 
     return $sce.trustAsHtml('<img id="over2" src="imgMale.png"/>'); 
     } 
     else if(gender=='female'){ 
     return $sce.trustAsHtml('<img id="over2" src="imgFemale.png"/>'); 
     } 
     return 'error getHtml'; 
    } 
}) 

Ich vereinfachte die JS mit einer Variablen sagen die Geschlecht, aber schließlich wird das Geschlecht vom Backend aus einer Datenbank gegeben.

Nach meinen Recherchen muss ich möglicherweise "kompilieren" verwenden, aber ich habe keine Ahnung, wie das funktioniert.

Danke für Ihre Hilfe!

Answer 1

Das Problem hier ist, dass Sie $scope.getHtml aufrufen, bevor Sie es initialisiert haben, also zu dem Zeitpunkt, an dem Sie den Wert nicht definiert aufrufen.

Fügen Sie keine Funktionen in $scope, es sei denn, Sie brauchen sie dort, und rufen Sie sie nicht über $scope von Javascript, wenn Sie sie direkt aufrufen können. Dies sollte funktionieren:

.controller('sceneCtrl', function($scope, $http, $sce){ 

    $scope.imgToLoad = getHtml(); 

    function getHtml(){ 

     var gender='male'; 
     if(gender=='male'){ 
     return $sce.trustAsHtml('<img id="over2" src="imgMale.png"/>'); 
     } 
     else if(gender=='female'){ 
     return $sce.trustAsHtml('<img id="over2" src="imgFemale.png"/>'); 
     } 
     return 'error getHtml'; 
    } 
}) 

Answer 2

Verwenden Sie benutzerdefinierte Richtlinie ng-html

DEMO: http://jsfiddle.net/AntonWebDev2012/mb4nv5my/

.directive('ngHtml', [ '$compile', function ($compile) { 
    return function (scope, elem, attrs) { 
     if (attrs.ngHtml) { 
     elem.html(scope.$eval(attrs.ngHtml)); 
     $compile(elem.contents())(scope); 
     } 
     scope.$watch(attrs.ngHtml, function (newValue, oldValue) { 
     if (newValue && newValue !== oldValue) { 
      elem.html(newValue); 
      $compile(elem.contents())(scope); 
     } 
     }); 
    }; 
    } ]); 

Answer 3

Direkt html gearbeitet, also ist das Problem ist: Funktion aufgerufen wird, bevor es initialisiert wird, versuchen Aufruf es danach. Eg. $scope.getHtml=function(){ } $scope.imgToLoad=$scope.getHtml();

Answer 4

Hier Mein-Code .. Ich habe einige Änderungen ..

.controller('sceneCtrl',['$scope','$http','$sce', function($scope, $http, $sce) { 

var gender='male'; 
$scope.getHtml=function(){ 
    if(gender=='male'){ 
    return $sce.trustAsHtml('<h3>Pablo</h3><img id="over2" src="http://www.freeiconspng.com/uploads/male-icon-19.png"/>'); 
    } 
    else if(gender=='female'){ 
    return $sce.trustAsHtml('<h3>Picaso</h3><img id="over2" src="http://weknowyourdreams.com/images/female/female-01.jpg"/>'); 
    } 
    return 'error getHtml'; 
}; 
$scope.imgToLoad = $scope.getHtml(); 


}]); 

})(window.angular); 

Zuerst erkläre ich die getHTML Funktion und dann rufen.