javascript - 如何从 ng-repeat 表达式中更新父作用域变量?

标签 javascript angularjs angularjs-scope angularjs-ng-repeat ng-class

我遇到过这样一种情况,我必须从 ng-repeat 表达式(实际上是 ng-repeat 中的 ng 类调用)中更新范围变量。

<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>

在 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;
    };

}

Example App Screenshot

Ng-repeat 在子 Controller 中,我要更新的数据在其父 Controller 中。我知道您已经多次阅读相同的问题,请继续阅读并查看 JsFiddle示例。

所以表达式函数检查特定 ng-repeat 迭代的过滤数据,如果它与其他一些相应的父作用域变量不匹配,它返回一个类,但它也应该更新父作用域计数器。 由于这些表达式不只求值一次,而是至少求值一次(由于摘要中的脏检查),因此对于每种情况,计数器都会递增不止一次。

我已经通过在 ng-repeat 之后计算应用于该特定数据的类来解决我的问题(您将在 JsFiddle 示例中看到)。 但是我想我将来可能会遇到同样的问题,所以我想学习如何在 ng-repeat 迭代的表达式中更新父范围。

我放了第二个JsFiddle ,我尝试在父 Controller 和子 Controller 上使用工厂,希望为两个 Controller 更新一个公共(public)变量。当我记录 (consol.log) 每次迭代和工厂方法变量时,它显示迭代次数 + 1(仍然是错误值),但它没有反射(reflect)在页面表达式中......根本没有意义。

如果有任何帮助,我将不胜感激。谢谢。

JsFiddle 1 JsFiddle 2

最佳答案

因为 watched 表达式(比如由 ng-class 指令隐式设置的表达式)“可以在每个 $digest() 中执行多次并且应该是幂等的“。 你应该明白什么是 $watch() $digest() 函数执行并查找有关 Angular's digest cycle 的资源.

因此,在 watchExpression 中递增计数器不是一个好主意。
不过,计数类似乎没问题。


顺便说一句,工厂方法将帮助您跨范围共享数据,但它无助于解决“每个摘要周期多次执行”的问题。此外,它在您的情况下可能是多余的,因为子范围和父范围可以直接共享数据。
在任何情况下,要显示结果,您必须将工厂的 getMismatchCount() 函数与您在 HTML 中使用的 getMismatchCount() 函数“绑定(bind)”(在来自工厂的不匹配计数:{{getMismatchCount()}}):

function mainCtrl($scope, $window, repeatFactory)
    ...
    $scope.getMismatchCount = repeatFactory.getMismatchCount;

关于javascript - 如何从 ng-repeat 表达式中更新父作用域变量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22580828/

相关文章:

javascript - 设置超时不会立即返回

javascript - 通过 app.single 使用多个状态

javascript - Angular 表格排序和拖放表格行冲突

javascript - AngularJS Iframe 弹出窗口像 fancybox 一样?

AngularJS - 将相同的 Controller 附加到多个 html 元素

javascript - 增加随机化的权重

javascript - 计算末端旋转圆

javascript - Electron 2.0.8 无法访问存储库中的文件

javascript - AngularJS 将变量分配给 View 的范围

angularjs - 使用 ControllerAs 时 Angular 嵌套指令出现问题