Refactor ngInject

Author: Anatoly Ostrovsky

src/directive/inject/inject.js

@@ -11,25 +11,20 @@ export function ngInjectDirective($log, $injector) {
   return {
     restrict: "A",
     link(scope, _element, attrs) {
-      const expr = attrs["ngInject"];
-
+      const expr = attrs.ngInject;
       if (!expr) return;
-      // Match any identifier that starts with $, or ends with Service/Factory
-      // Example matches: $http, userService, authFactory
-      const replacedExpr = expr.replace(
-        /(\$[\w]+|[\w]+(?:Service|Factory))/g,
-        (match, name) => {
-          try {
-            const service = $injector.get(name);
-            scope.$target[name] = service;
-            return name;
-          } catch {
-            $log.warn(`Injectable ${name} not found in $injector`);
-            return match;
-          }
-        },
-      );
-      scope.$apply(replacedExpr);
+      const tokens = expr
+        .split(";")
+        .map((s) => s.trim())
+        .filter(Boolean);
+
+      for (const name of tokens) {
+        if ($injector.has(name)) {
+          scope[name] = $injector.get(name);
+        } else {
+          $log.warn(`Injectable ${name} not found in $injector`);
+        }
+      }
     },
   };
 }

src/directive/inject/inject.spec.js

@@ -85,24 +85,24 @@ describe("ngInject", () => {
     expect(el.innerText.trim()).toBe("123");
   });
 
-  it("should ignore non-$ identifiers", async () => {
-    el.innerHTML = `<div ng-inject="someVar = 5"> {{ someVar }} </div>`;
-    $compile(el)($rootScope);
-    await wait();
-    expect($rootScope.someVar).toBe(5);
-  });
-
-  it("should inject identifiers ending in *Service", async () => {
+  it("should inject identifiers for services", async () => {
     el.innerHTML = `<div ng-inject="userService"> {{ userService.name }} </div>`;
     $compile(el)($rootScope);
     await wait();
     expect(el.innerText.trim()).toBe("Bob");
   });
 
-  it("should inject identifiers ending in *Factory", async () => {
+  it("should inject identifiers for factories", async () => {
     el.innerHTML = `<div ng-inject="userFactory"> {{ userFactory.name }} </div>`;
     $compile(el)($rootScope);
     await wait();
     expect(el.innerText.trim()).toBe("Fred");
   });
+
+  it("should define references anywhere in the template", async () => {
+    el.innerHTML = `<div>{{ userService.name }} <div ng-inject="userService"></div></div>`;
+    $compile(el)($rootScope);
+    await wait();
+    expect(el.innerText.trim()).toBe("Bob");
+  });
 });