AngularJS: ng-bind-html в зависимости от переменной

Question

Я хочу отобразить некоторые html на сцене (изображение мужчины или женщины), в зависимости от пола человека, зарегистрированного на моем сайте. Директива ng-bind-html работает, когда я определяю «imageToLoad» статически. Тем не менее, это не работает, если мой html для привязки определяется функцией.

Консоль говорит мне: TypeError: $ scope.getHtml не является функцией

Вот мой упрощенный код:

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'; 
    } 
}) 

Я упростил JS с переменной, указав, что пола, но в конечном итоге гендер будет предоставлен бэкэндом из базы данных.

Согласно моим исследованиям, мне, возможно, придется использовать «компиляцию», но я понятия не имею, как это работает.

Благодарим за помощь!

Answer 1

Проблема заключается в том, что вы вызываете $scope.getHtml, прежде чем инициализировать его, поэтому в момент, когда вы вызываете это значение, не определено.

Не помещайте функции в $scope, если они вам не нужны, и не вызывайте их через $scope из javascript, когда вы можете позвонить им напрямую. Это должно работать:

.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

Использования пользовательской директива нг-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

Прямой HTML работал, поэтому проблема: функция вызывается до инициализации, попробуйте позвонить это после. Например. $scope.getHtml=function(){ } $scope.imgToLoad=$scope.getHtml();

Answer 4

Вот мой код .. Я сделал некоторые изменения ..

.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); 

Сначала я Объявить функцию getHTML, а затем вызвать его.