angularjs - ngRepeat 与 ngInit - ngRepeat 不会刷新渲染值

AngularJS

使用AngularJS的开发者可能会遇到一个问题，即ngRepeat与ngInit指令无法刷新渲染值的情况。这意味着当ngRepeat循环的数据发生变化时，ngInit指令不会重新初始化，导致渲染的值不会更新。本文将探讨这个问题，并提供一个案例代码来解释这个现象。

在AngularJS中，ngRepeat指令用于循环迭代一个集合，并渲染集合中的每个项。ngInit指令用于在每个循环项上初始化一个作用域变量。然而，当使用ngInit指令时，它只会在循环的第一个项上执行初始化操作，并不会在每个循环项上重新执行。这就是为什么当ngRepeat循环的数据发生变化时，ngInit指令不会重新初始化的原因。

为了更好地理解这个问题，让我们看一个简单的示例代码。假设我们有一个包含学生姓名和年龄的数组，并使用ngRepeat指令将每个学生的信息显示在页面上：

html
<div ng-repeat="student in students" ng-init="age = getAge(student)">
  
{{student.name}} - {{age}}
</div>

在这个例子中，ngRepeat指令循环迭代students数组，并将每个学生的姓名和年龄显示在页面上。ngInit指令通过调用getAge函数来初始化一个名为age的作用域变量。

但是，如果我们在循环之后改变了students数组，比如添加一个新的学生，我们会发现新添加的学生的年龄不会被正确地显示出来。这是因为ngInit指令不会重新初始化。

为了解决这个问题，我们可以使用一个自定义指令来替代ngInit指令。这个自定义指令将在每个循环项上执行初始化操作，并确保在数据发生变化时重新初始化。下面是一个示例代码：

Javascript
app.directive('myInit', function() {
  return {
    link: function(scope, element, attrs) {
      scope.$watch(attrs.myInit, function(value) {
        scope[attrs.myInitVar] = value;
      });
    }
  };
});

使用这个自定义指令，我们可以将上面的例子修改如下：

html
<div ng-repeat="student in students" my-init="getAge(student)" my-init-var="age">
  
<img src="https://img.izhida.com/topic/d52387880e1ea22817a72d3759213819.jpg" alt="Java"><br>Java
{{student.name}} - {{age}}
</div>

现在，当我们添加一个新的学生到students数组时，新学生的年龄将被正确地显示出来，因为myInit指令会重新执行初始化操作。

在本文中，我们讨论了ngRepeat与ngInit指令无法刷新渲染值的问题，并提供了一个案例代码来说明这个现象。我们还介绍了如何使用自定义指令来解决这个问题。使用自定义指令可以确保在ngRepeat循环的数据发生变化时，每个循环项都能重新初始化。这样，我们就可以正确地渲染和显示每个循环项的值。