Bog*_*gac 5 javascript angularjs angularjs-scope angularjs-ng-repeat ng-class
我遇到过一种情况,我必须从ng-repeat表达式中更新范围变量(实际上在ng-repeat中的ng-class调用).
<div id="page" ng-controller="MainCtrl">
.
<section id="body" ng-init="countMis = {num:0}">
.
<tbody>
<tr ng-repeat="upperCaseLetter in alphabet.specialsUpper" ng-controller="letterController">
<td>{{upperCaseLetter}}</td>
<td>{{filteredLetter=(upperCaseLetter | lowercase)}}</td>
<td>{{alphabet.specialsLower[$index]}}</td>
<td><span ng-class="lowercaseEqual($index,filteredLetter)"></span></td>
</tr>
</tbody>
Run Code Online (Sandbox Code Playgroud)
在app.js中:
function letterController($scope)
{
$scope.lowercaseEqual = function(indx,letter)
{
var returnStr="";
if(letter == $scope.alphabet.specialsLower[indx])
{
returnStr = "glyphicon glyphicon-ok";
}
else
{
$scope.countMis.num = $scope.countMis.num + 1;
returnStr = "glyphicon glyphicon-remove";
}
return returnStr;
};
}
Run Code Online (Sandbox Code Playgroud)

Ng-repeat位于子控制器中,我想要更新的数据位于其父控制器中.我知道你已多次阅读同一个问题,请继续阅读并查看JsFiddle示例.
因此表达式函数检查特定ng-repeat迭代的过滤数据,如果它与其他一些相应的父范围变量不匹配,则返回一个类,但它也应该更新父范围计数器.由于这些表达式不仅仅评估一次,而是至少一次(因为对摘要进行脏检查),因此对于每种情况,结果计数器增加不止一次.
我通过在ng-repeat之后计算应用于该特定数据的类来解决我的问题(您将在JsFiddle示例中看到).但是我想我将来会遇到同样的问题,所以我想学习如何在ng-repeat迭代的表达式中更新父范围.
我已经放了第二个JsFiddle,我尝试在父控制器和子控件上使用工厂,希望更新两个控制器的公共变量.当我记录(consol.log)每个迭代和工厂方法变量时,它显示迭代次数+ 1(仍为假值),但它没有反映在页面表达式上......根本没有意义.
我很感激任何帮助.谢谢.
由于监视表达式(如指令隐式设置的表达式ng-class) “每个$digest()可以执行多次并且应该是幂等的”。您应该了解$watch()和$digest()函数的作用,并查找有关Angular 的摘要周期的资源。
因此,在 watchExpression 内增加计数器并不是一个好主意。
不过,计算班级似乎还可以。
顺便说一句,工厂方法将帮助您跨范围共享数据,但它无助于解决“每个摘要周期多次执行”问题。此外,在您的情况下它可能是多余的,因为子作用域和父作用域可以直接共享数据。
无论如何,要显示结果,您必须将工厂的getMismatchCount()函数与getMismatchCount()您在 HTML 中使用的函数“绑定”(在 中Mismatches Count from Factory: {{getMismatchCount()}}):
function mainCtrl($scope, $window, repeatFactory)
...
$scope.getMismatchCount = repeatFactory.getMismatchCount;
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
1211 次 |
| 最近记录: |