AngularJS：因变量

纳克绑定-HTML我想显示在场景上一些HTML（一个男人或一个女人的图像），这取决于登录我的网站的人的性别。当我静态定义“imageToLoad”时，指令ng-bind-html起作用。但是，如果我的html绑定是由一个函数定义的，则它不起作用。AngularJS：因变量

控制台告诉我：类型错误：$ 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，性别，但最终性别将由后端从数据库中提供。

根据我的研究，我可能不得不使用“编译”，但我不知道它是如何工作的。

感谢您的帮助！

来源

2017-02-22 Driblou

您是否收到任何错误？ –

尝试在下列行之前放置函数定义：$ scope.imgToLoad = $ scope.getHtml（）; –

这里的问题是您在初始化之前调用了$scope.getHtml，因此在您调用该值时未定义。

不要将函数放入$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'; 
    } 
})

来源

2017-02-22 09:55:59 Duncan

这个解决方案非常完美，非常感谢。我是AngularJS的新手，所以我认为必须将函数声明为$ scope才能正常工作。 – Driblou

注意，有人试图编辑这个答案的功能移动到顶部，因为这是他们的首选风格。作为评论而不是编辑会更好，所以我拒绝了。两个问题：我尽量让答案匹配那里没有真正的理由去改变问题的风格，我也喜欢自己把功能后的控制器身上所有的可执行代码。另请参阅角度风格指南https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y034 – Duncan

使用自定义指令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); 
     } 
     }); 
    }; 
    } ]);

来源

2017-02-22 09:58:34

直接HTML工作过，所以问题是：它被初始化之前函数被调用，尝试调用它之后。例如， $scope.getHtml=function(){ } $scope.imgToLoad=$scope.getHtml();

来源

2017-02-22 10:00:45

这里我的代码。我做了一些改变..

.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功能，然后调用它。

来源

2017-02-22 10:09:47

AngularJS：因变量

回答

相关问题