ng-bind-html 使用不识别临时变量形式的函数 ng-repeat
ng-bind-html using a function not recognizing temporary variable form ng-repeat
我是编程新手,这是我必须回答的第一个问题 post。
我想做的是使用 ng-bind-html
将五个图像文件放入由 ng-repeat
创建的 div 中。这五个图像文件将在 ng-repeat
.
中的每个元素之间有所不同
<div ng-repeat = "newGame in myGamesList">
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<div>
<img src="{{newGame.thumbnail}}" alt="">
</div>
<div class="caption">
<h4 class="pull-right">{{newGame.price}}</h4>
<h4><a ng-style="{'font-size': nameSize((newGame.name | removeSubName).length)}" class="categoryGameName" href="#details/{{myGamesList.indexOf(newGame)}}">{{newGame.name | removeSubName}}</a>
</h4>
<p>{{newGame.description}}</p>
</div>
<div id="ratingDiv" style="margin-left: 8px; margin-right: 8px; margin-bottom: 5px;">
<div style="display: inline-block" ng-bind-html="trustedHtml"></div>
<p class="pull-right" style="color: #d17581">{{newGame.numberReviews}} reviews</p>
</div>
</div>
</div>
</div>
我在 myApp
中也有这个,sce
未定义等没有问题。
$scope.html = getStars(newGame);
$scope.trustedHtml = $sce.trustAsHtml($scope.html);
如果我将 getStars(newGame)
中的 newGame
替换为代码工作范围内定义的内容,但是使用 newGame
(尝试与 [=22= 中的临时变量匹配) ]), 什么也没有出现。
我怎样才能做到 newGame
被识别为正在迭代的每个元素?
函数getStars
有如下代码
$scope.getStars = function(game) {
var numStars = (game.numberStars);
iconString = '';
for (i=0; i<Math.floor(numStars); i++) {
iconString += '<img style="width:16px" class="starGlyph" src="images/fullStar.png" alt=""/>'
}
if (numStars%1 == 0.5) {
iconString += '<img style="width:16px" class="starGlyph" src="images/halfStar.png" alt=""/>'
}
for (j=0; j<(5-Math.ceil(numStars)); j++) {
iconString += '<img style="width:16px" class="starGlyph" src="images/emptyStar.png" alt=""/>'
}
return iconString;
};
以防万一。为了澄清,我需要 myGamesList
中的每个 newGame
作为输入到 getStars
函数的参数。
抱歉,如果这很难理解,但我已尽力涵盖所有基础!
你的$scope.html
来自哪里?
您应该做的是在 ng-bind-html
中使用 newGame
,如下所示
<div style="display: inline-block" ng-bind-html="getTrustedHtml(newGame)"></div>
在你的控制器中
$scope.getTrustedHtml = function(game) {
// get the game HTML
var html = $scope.getStars(game);
// Return it as trusted HTML for ngBindHtml
return $sce.trustAsHtml(html);
}
我是编程新手,这是我必须回答的第一个问题 post。
我想做的是使用 ng-bind-html
将五个图像文件放入由 ng-repeat
创建的 div 中。这五个图像文件将在 ng-repeat
.
<div ng-repeat = "newGame in myGamesList">
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<div>
<img src="{{newGame.thumbnail}}" alt="">
</div>
<div class="caption">
<h4 class="pull-right">{{newGame.price}}</h4>
<h4><a ng-style="{'font-size': nameSize((newGame.name | removeSubName).length)}" class="categoryGameName" href="#details/{{myGamesList.indexOf(newGame)}}">{{newGame.name | removeSubName}}</a>
</h4>
<p>{{newGame.description}}</p>
</div>
<div id="ratingDiv" style="margin-left: 8px; margin-right: 8px; margin-bottom: 5px;">
<div style="display: inline-block" ng-bind-html="trustedHtml"></div>
<p class="pull-right" style="color: #d17581">{{newGame.numberReviews}} reviews</p>
</div>
</div>
</div>
</div>
我在 myApp
中也有这个,sce
未定义等没有问题。
$scope.html = getStars(newGame);
$scope.trustedHtml = $sce.trustAsHtml($scope.html);
如果我将 getStars(newGame)
中的 newGame
替换为代码工作范围内定义的内容,但是使用 newGame
(尝试与 [=22= 中的临时变量匹配) ]), 什么也没有出现。
我怎样才能做到 newGame
被识别为正在迭代的每个元素?
函数getStars
有如下代码
$scope.getStars = function(game) {
var numStars = (game.numberStars);
iconString = '';
for (i=0; i<Math.floor(numStars); i++) {
iconString += '<img style="width:16px" class="starGlyph" src="images/fullStar.png" alt=""/>'
}
if (numStars%1 == 0.5) {
iconString += '<img style="width:16px" class="starGlyph" src="images/halfStar.png" alt=""/>'
}
for (j=0; j<(5-Math.ceil(numStars)); j++) {
iconString += '<img style="width:16px" class="starGlyph" src="images/emptyStar.png" alt=""/>'
}
return iconString;
};
以防万一。为了澄清,我需要 myGamesList
中的每个 newGame
作为输入到 getStars
函数的参数。
抱歉,如果这很难理解,但我已尽力涵盖所有基础!
你的$scope.html
来自哪里?
您应该做的是在 ng-bind-html
中使用 newGame
,如下所示
<div style="display: inline-block" ng-bind-html="getTrustedHtml(newGame)"></div>
在你的控制器中
$scope.getTrustedHtml = function(game) {
// get the game HTML
var html = $scope.getStars(game);
// Return it as trusted HTML for ngBindHtml
return $sce.trustAsHtml(html);
}