AngularJS：ng-bind-html取决于变量

Question

我想在场景中显示一些html（一个男人或一个女人的图像），具体取决于登录我网站的人的性别。 当我静态定义“ imageToLoad”时，指令ng-bind-html起作用。 但是，如果我要绑定的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放入函数，除非您在那里需要它们，并且当可以直接调用它们时，不要通过javascript通过$scope调用它们。 这应该工作：

.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

使用自定义指令ng-html

演示： 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函数，然后调用它。