Add index watchers

Author: tolyo

src/core/scope/scope.spec.js

@@ -3297,6 +3297,22 @@ describe("Scope", () => {
       expect(scope._children.includes(child2)).toBeFalse();
     });
 
+    it("should destroy a displaced direct child scope when replacing an array item by index", () => {
+      const scope = createScope();
+      const child = scope.$new();
+      const onDestroy = jasmine.createSpy("child destroy on index replace");
+
+      child.$on("$destroy", onDestroy);
+      scope.items = [child];
+
+      scope.items[0] = { replacement: true };
+
+      expect(onDestroy).toHaveBeenCalled();
+      expect(child.$handler._destroyed).toBeTrue();
+      expect(scope._children.includes(child)).toBeFalse();
+      expect(scope.items[0].replacement).toBeTrue();
+    });
+
     it("should destroy direct child scopes contained in a displaced collection when overwritten", () => {
       const scope = createScope();
       const child1 = scope.$new();

src/core/scope/scope.ts

@@ -751,6 +751,10 @@ export class Scope {
           if (_foreignListeners) {
             this._scheduleListener(_foreignListeners);
           }
+
+          if (!isProxy(value)) {
+            this._scheduleArrayOwnerListeners(target, proxy, property);
+          }
         }
 
         if (this._objectListeners.get(target[property])) {
@@ -789,6 +793,10 @@ export class Scope {
           }
 
           this._checkListenersForAllKeys(value);
+
+          if (!isProxy(value)) {
+            this._scheduleArrayOwnerListeners(target, proxy, property);
+          }
         }
         target[property] = createScope(value, this);
 
@@ -847,17 +855,7 @@ export class Scope {
         }
 
         if (isArray(target)) {
-          if (this._objectListeners.has(proxy) && property !== "length") {
-            const keyList = this._objectListeners.get(proxy);
-
-            if (keyList) {
-              for (let i = 0, l = keyList.length; i < l; i++) {
-                const currentListeners = this._watchers.get(keyList[i]);
-
-                if (currentListeners) this._scheduleListener(currentListeners);
-              }
-            }
-          }
+          this._scheduleArrayOwnerListeners(target, proxy, property);
         }
 
         return true;
@@ -1798,6 +1796,35 @@ export class Scope {
     return false;
   }
 
+  /** @internal Reschedules watchers that observe this array through its owning scope property. */
+  _scheduleArrayOwnerListeners(
+    target: ScopeTarget,
+    proxy: ScopeProxy,
+    property: string,
+  ): void {
+    if (!isArray(target) || property === "length") {
+      return;
+    }
+
+    if (!this._objectListeners.has(proxy)) {
+      return;
+    }
+
+    const keyList = this._objectListeners.get(proxy);
+
+    if (!keyList) {
+      return;
+    }
+
+    for (let i = 0, l = keyList.length; i < l; i++) {
+      const currentListeners = this._watchers.get(keyList[i]);
+
+      if (currentListeners) {
+        this._scheduleListener(currentListeners);
+      }
+    }
+  }
+
   /** Evaluates an Angular expression in the context of this scope. */
   $eval(expr: ng.Expression, locals?: Record<string, any>) {
     const fn = $parse(expr);

src/directive/repeat/repeat.spec.js

@@ -649,6 +649,34 @@ describe("ngRepeat", () => {
       expect(lis[1].getAttribute("mark")).toEqual("a");
     });
 
+    it("should preserve repeated row DOM when the collection is shallow-cloned with the same items", async () => {
+      element = $compile(
+        '<ul><li ng-repeat="item in items">{{item.name}}|</li></ul>',
+      )(scope);
+      const first = { name: "a" };
+      const second = { name: "b" };
+
+      scope.items = [first, second];
+      await wait();
+
+      let lis = element.querySelectorAll("li");
+      const firstRow = lis[0];
+      const secondRow = lis[1];
+
+      firstRow.setAttribute("mark", "first");
+      secondRow.setAttribute("mark", "second");
+
+      scope.items = [...scope.items];
+      await wait();
+
+      lis = element.querySelectorAll("li");
+      expect(lis[0]).toBe(firstRow);
+      expect(lis[1]).toBe(secondRow);
+      expect(lis[0].getAttribute("mark")).toBe("first");
+      expect(lis[1].getAttribute("mark")).toBe("second");
+      expect(element.textContent).toBe("a|b|");
+    });
+
     it("keeps grouped interpolation bindings when archived items are removed", async () => {
       element = $compile(
         '<ul><li ng-repeat="todo in tasks">{{todo.task}} {{todo.done}}|</li></ul>',
@@ -667,6 +695,24 @@ describe("ngRepeat", () => {
       await wait();
       expect(element.textContent).toBe("Build an AngularTS app false|");
     });
+
+    it("updates repeated rows when an array item object is replaced by index", async () => {
+      element = $compile(
+        '<ul><li ng-repeat="todo in tasks">{{todo.task}} {{todo.done}}|</li></ul>',
+      )(scope);
+      scope.tasks = [
+        { task: "First Task", done: false },
+        { task: "Second Task", done: true },
+      ];
+
+      await wait();
+      expect(element.textContent).toBe("First Task false|Second Task true|");
+
+      scope.tasks[0] = { task: "New Task", done: false };
+      await wait();
+
+      expect(element.textContent).toBe("New Task false|Second Task true|");
+    });
   });
 
   describe("nesting in replaced directive templates", () => {