Question

我想在一个场景上显示一些html（一个男人或一个女人的图像），具体取决于我网站上登录的人的性别。当我静态定义“imageToLoad”时，指令ng-bind-html起作用。但是，如果我的html to bind是由函数定义的，它就不起作用。

控制台告诉我： 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

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

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

4 个答案: