ngScope directive

Author: tolyo

src/angular.js

@@ -216,6 +216,7 @@ export class Angular {
        * @param {ng.InjectorService} $injector
        */
       (scope, el, compile, $injector) => {
+        this.$rootScope = scope;
         // ng-route deps
         this.$injector = $injector; // TODO refactor away as this as this prevents multiple apps from being used
 
@@ -297,6 +298,17 @@ export class Angular {
       this.bootstrap(appElement, module ? [module] : [], config);
     }
   }
+
+  /**
+   * @param {string} name
+   * @returns {ProxyHandler<ng.Scope>}
+   */
+  getNamedScope(name) {
+    const scope = this.$rootScope.$searchByName(name);
+    if (scope) {
+      return scope.$proxy;
+    }
+  }
 }
 
 /**

src/angular.spec.js

@@ -271,7 +271,7 @@ describe("module loader", () => {
     expect(myModule2).not.toBe(gotModule);
   });
 
-  it("allows creates an instance on NgModule", () => {
+  it("creates an instance on NgModule", () => {
     angular.module("myModule", []);
     const gotModule = angular.module("myModule");
     expect(gotModule).toBeInstanceOf(NgModule);

src/core/controller/controller.js

@@ -70,7 +70,7 @@ export class ControllerProvider {
     "$injector",
 
     /**
-     * @param {import("../../core/di/internal-injector.js").InjectorService} $injector
+     * @param {ng.InjectorService} $injector
      * @returns {import("./interface.ts").ControllerService} A service function that creates controllers.
      */
     ($injector) => {

src/core/di/ng-module/ng-module.spec.js

@@ -18,6 +18,7 @@ describe("NgModule", () => {
   it("can be instantiated", () => {
     expect(ngModule).toBeDefined();
     expect(ngModule.name).toBeDefined();
+    expect(ngModule.name).toEqual("test");
     expect(ngModule.requires).toEqual(["otherModule"]);
   });
 

src/core/scope/scope.js

@@ -35,9 +35,11 @@ let $exceptionHandler;
 
 export const $postUpdateQueue = [];
 
+export let rootScope;
+
 export class RootScopeProvider {
   constructor() {
-    this.rootScope = createScope();
+    rootScope = this.rootScope = createScope();
   }
 
   $get = [
@@ -239,6 +241,8 @@ export class Scope {
 
     this.scheduled = [];
 
+    this.$scopename = undefined;
+
     /** @private */
     this.propertyMap = {
       $watch: this.$watch.bind(this),
@@ -250,18 +254,20 @@ export class Scope {
       $apply: this.$apply.bind(this),
       $postUpdate: this.$postUpdate.bind(this),
       $isRoot: this.#isRoot.bind(this),
-      $proxy: this.$proxy,
       $on: this.$on.bind(this),
       $emit: this.$emit.bind(this),
       $broadcast: this.$broadcast.bind(this),
       $transcluded: this.$transcluded.bind(this),
       $handler: /** @type {Scope} */ (this),
+      $merge: this.$merge.bind(this),
+      $getById: this.$getById.bind(this),
+      $searchByName: this.$searchByName.bind(this),
+      $proxy: this.$proxy,
       $parent: this.$parent,
       $root: this.$root,
       $children: this.$children,
       $id: this.$id,
-      $merge: this.$merge.bind(this),
-      $getById: this.$getById.bind(this),
+      $scopename: this.$scopename,
     };
   }
 
@@ -277,8 +283,14 @@ export class Scope {
    */
   set(target, property, value, proxy) {
     if (property === "undefined") {
-      throw new Error("Attempting to set undefined property");
+      return false;
+    }
+
+    if (property === "$scopename") {
+      this.$scopename = value;
+      return true;
     }
+
     if (
       (target.constructor?.$nonscope &&
         Array.isArray(target.constructor.$nonscope) &&
@@ -496,9 +508,9 @@ export class Scope {
    * @returns {*} - The value of the property or a method if accessing `watch` or `sync`.
    */
   get(target, property, proxy) {
+    if (property === "$scopename" && this.$scopename) return this.$scopename;
     if (property === "$$watchersCount") return calculateWatcherCount(this);
     if (property === isProxySymbol) return true;
-
     if (target[property] && isProxy(target[property])) {
       this.$proxy = target[property];
     } else {
@@ -527,7 +539,6 @@ export class Scope {
         this.#scheduleListener(this.scheduled);
       }
     }
-
     if (hasOwn(this.propertyMap, property)) {
       this.$target = target;
       return this.propertyMap[property];
@@ -1272,6 +1283,26 @@ export class Scope {
       return res;
     }
   }
+
+  $searchByName(name) {
+    const getByName = (scope, name) => {
+      if (scope.$scopename === name) {
+        return scope;
+      } else {
+        let res = undefined;
+        for (const child of scope.$children) {
+          let found = getByName(child, name);
+          if (found) {
+            res = found;
+            break;
+          }
+        }
+        return res;
+      }
+    };
+
+    return getByName(this.$root, name);
+  }
 }
 
 /*------------- Private helpers -------------*/

src/directive/scope/scope.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>AngularTS Test Runner</title>
+
+    <link rel="shortcut icon" type="image/png" href="/images/favicon.ico" />
+    <link rel="stylesheet" href="/jasmine/jasmine.css" />
+    <link rel="stylesheet" href="/public/jasmine-helper.css" />
+    <script src="/jasmine/jasmine.js"></script>
+    <script src="/jasmine/jasmine-html.js"></script>
+    <script src="/jasmine/boot0.js"></script>
+    <script src="/jasmine/boot1.js"></script>
+    <script type="module" src="/src/directive/scope/scope.spec.js"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

src/directive/scope/scope.js

@@ -0,0 +1,11 @@
+/**
+ * @return {ng.Directive}
+ */
+export function ngScopeDirective() {
+  return {
+    scope: false,
+    async link($scope, _, $attrs) {
+      $scope.$scopename = $attrs.ngScope;
+    },
+  };
+}

src/directive/scope/scope.spec.js

@@ -0,0 +1,36 @@
+import { Angular } from "../../angular.js";
+import { dealoc } from "../../shared/dom.js";
+
+describe("ngScopeDirective", () => {
+  let $compile, $rootScope;
+
+  beforeEach(() => {
+    window.angular = new Angular();
+    window.angular.module("test", []);
+    dealoc(document.getElementById("app"));
+    let injector = window.angular.bootstrap(document.getElementById("app"), [
+      "test",
+    ]);
+    injector.invoke((_$compile_, _$rootScope_) => {
+      $compile = _$compile_;
+      $rootScope = _$rootScope_;
+    });
+  });
+
+  it("should set $scope.$scopename from the ng-scope attribute", async () => {
+    const scope = $rootScope.$new();
+    $compile('<div ng-scope="myName"></div>')(scope);
+
+    expect(scope.$scopename).toBe("myName");
+  });
+
+  it("should not create an isolate scope", () => {
+    const scope = $rootScope.$new();
+    scope.testVal = 42;
+
+    const element = $compile('<div ng-scope="x"></div>')(scope);
+
+    expect(window.angular.getScope(element)).toBe(scope); // same scope
+    expect(window.angular.getScope(element).testVal).toBe(42);
+  });
+});

src/directive/scope/scope.test.js

@@ -0,0 +1,12 @@
+import { test, expect } from "@playwright/test";
+
+const TEST_URL = "src/directive/scope/scope.html";
+
+test("unit tests contain no errors", async ({ page }) => {
+  await page.goto(TEST_URL);
+  await page.content();
+  await page.waitForTimeout(1000);
+  await expect(page.locator(".jasmine-overall-result")).toHaveText(
+    / 0 failures/,
+  );
+});

src/ng.js

@@ -135,6 +135,7 @@ import { SseProvider } from "./services/sse/sse.js";
 import { ngViewportDirective } from "./directive/viewport/viewport.js";
 import { ngWorkerDirective } from "./directive/worker/worker.js";
 import { ngWasmDirective } from "./directive/wasm/wasm.js";
+import { ngScopeDirective } from "./directive/scope/scope.js";
 
 /**
  * Initializes core `ng` module.
@@ -217,6 +218,7 @@ export function registerNgModule(angular) {
               ngViewport: ngViewportDirective,
               ngWasm: ngWasmDirective,
               ngWorker: ngWorkerDirective,
+              ngScope: ngScopeDirective,
             })
             .directive({
               input: hiddenInputBrowserCacheDirective,