Angular中多ng-app场景下控制器为何失效？技术疑问

核心原因是：AngularJS会自动引导页面中第一个出现的ng-app指令，后续的ng-app不会被自动初始化，这和控制器能否多次引用无关。

现象原因拆解 #

当你用两个包含ng-app="EntryApp"的div分别包裹输入框时：

• 第一个ng-app会被Angular自动识别并完成初始化，内部的控制器绑定、ng-keydown事件都能正常工作，所以前两个输入框能限制数字输入。
• 第二个ng-app不会被Angular自动处理，它内部的ng-controller和事件绑定完全不生效，第三个输入框就是普通HTML输入框，自然可以输入任意字符。
• 当把所有输入框放到同一个ng-app容器内时，整个区域都被Angular正确初始化，控制器的方法能绑定到所有输入框的事件上，因此全部生效。

正确实现方案 #

1. 单一根ng-app结构（推荐）：页面中只保留一个ng-app（建议挂载在<html>或<body>标签上），所有需要Angular管理的内容都放在这个根容器内部，这是AngularJS项目的标准结构。
   示例代码：

   <body ng-app="EntryApp">
     <div ng-controller="EntryController">
       <input type="text" ng-keydown="keydown($event)">
       <input type="text" ng-keydown="keydown($event)">
       <input type="text" ng-keydown="keydown($event)">
     </div>
   </body>
   

2. 特殊场景下的多应用手动初始化：如果确实需要多个独立的Angular应用（普通业务场景极少用到），不能依赖自动引导，需手动调用angular.bootstrap()初始化后续应用：

   angular.element(document).ready(function() {
     // 手动初始化指定容器的Angular应用
     angular.bootstrap(document.getElementById('second-app-container'), ['EntryApp']);
   });
   

控制器逻辑优化建议 #

你当前的代码只限制了主键盘数字，未覆盖小键盘数字和功能性按键（退格、方向键等），可以优化为更友好的版本：

var mod = angular.module('EntryApp', []);
mod.controller('EntryController', function ($scope) {
    $scope.keydown = function ($event) {
        const keyCode = $event.keyCode;
        // 允许主键盘数字、小键盘数字
        const isDigit = (keyCode >= 48 && keyCode <= 57) || (keyCode >= 96 && keyCode <= 105);
        // 允许功能性按键：退格、删除、左右方向键
        const isFunctionalKey = [8, 46, 37, 39].includes(keyCode);
        
        if (!isDigit && !isFunctionalKey) {
            $event.preventDefault();
        }
    }
});

内容的提问来源于stack exchange，提问作者Douglas Hahn