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：因變量

回答

相關問題