Angularjs 多个控制器未运行_Angularjs_Module_Controller

Angularjs 多个控制器未运行

angularjs module

Angularjs 多个控制器未运行,angularjs,module,controller,Angularjs,Module,Controller,这是我的代码。有两个不同的应用程序，其中有两个不同的控制器，但后一个没有运行。为什么会发生这种情况？这两个模块是不同的鸡蛋头木卫一 var app=angular.module（'ctrldemo'，[]）； app.controller（'FirstCtrl'，函数（$scope）{ $scope.name=“yashdeep”， $scope.age=“21” }); var papa=angular.module（'anodemo'，[]）； papa.controller（'ano

这是我的代码。有两个不同的应用程序，其中有两个不同的控制器，但后一个没有运行。为什么会发生这种情况？这两个模块是不同的


鸡蛋头木卫一
var app=angular.module（'ctrldemo'，[]）；
app.controller（'FirstCtrl'，函数（$scope）{
$scope.name=“yashdeep”，
$scope.age=“21”
});
var papa=angular.module（'anodemo'，[]）；
papa.controller（'anoFirstCtrl'，函数（$scope）{
$scope.name=“yamini”；
$scope.age=“22”
});
{{问候语+“”+姓名+“”+年龄}
{{greeeting+“”+name+“”+age}

如果要运行多个angular应用程序，需要使用angulars手动引导应用程序

您还需要从HTML中删除ng应用程序

<div id="ctrldemo" ng-controller="FirstCtrl">
    <input type="text" ng-model="greeting" />
    <div>{{greeting+" "+name+" "+age}}</div>
</div>

<div id="anodemo" ng-controller="anoFirstCtrl">
    <input type="text" ng-model="greeeting">
    <div>{{greeeting+" "+name+" "+age}}</div>
</div>


{{问候语+“”+姓名+“”+年龄}
{{greeeting+“”+name+“”+age}

小提琴：

这是否是个好主意，我不太确定。我认为最好将模块注入到应用程序中

一个页面中只能有一个

ng app

，angular只能引导一次

为了使用单独的模块，您需要有一个主模块，并将其他模块作为依赖项注入其中

var app=angular.module('ctrldemo', ['anodemo']);

<html ng-app="ctrldemo">

var-app=angular.module（'ctrldemo'，['anodemo']）；

现在，您可以从任一模块使用控制器、服务、指令等

如果您打算这样做，最好的方法是使用指令。我就是这么做的。它叫ngModule。下面是使用它时代码的外观：

<!DOCTYPE html>
<html>
    <head>
        <script src="angular.js"></script>
        <script src="angular.ng-modules.js"></script>
        <script>
          var moduleA = angular.module("MyModuleA", []);
          moduleA.controller("MyControllerA", function($scope) {
              $scope.name = "Bob A";
          });

          var moduleB = angular.module("MyModuleB", []);
          moduleB.controller("MyControllerB", function($scope) {
              $scope.name = "Steve B";
          });
        </script>
    </head>
    <body>
        <div ng-modules="MyModuleA, MyModuleB">
            <h1>Module A, B</h1>
            <div ng-controller="MyControllerA">
                {{name}}
            </div>
            <div ng-controller="MyControllerB">
                {{name}}
            </div>
        </div>

        <div ng-module="MyModuleB">
            <h1>Just Module B</h1>
            <div ng-controller="MyControllerB">
                {{name}}
            </div>
        </div>
    </body>
</html>


var moduleA=angular.module（“MyModuleA”，[]）；
moduleA.controller（“MyControllerA”，函数（$scope）{
$scope.name=“Bob A”；
});
var moduleB=角度模块（“MyModuleB”，[]）；
moduleB.controller（“MyControllerB”，函数（$scope）{
$scope.name=“史蒂夫B”；
});
模块A、B
{{name}}
{{name}}
就模块B
{{name}}

您有一个单一模块有两个控制器的示例我想使用两个不同模块的控制器如果您想运行多个angulars应用程序，您需要使用angulars.bootstrap（）手动引导应用程序谢天谢地，我一直在想这个问题，但没有一个清晰的理解。老实说，我不知道你可以在一个页面中有单独的引导。主要缺点是无法在整个

应用程序中共享服务。有趣的though@vengicx嗯，这有点超出了angular的正常工作方式，所以DOM操作在这里很好。但一般来说，在使用angular时尽量避免操纵DOM。如果你真的没有其他选择，那么在指令中这样做
var app=angular.module('ctrldemo', ['anodemo']);

<html ng-app="ctrldemo">

<!DOCTYPE html>
<html>
    <head>
        <script src="angular.js"></script>
        <script src="angular.ng-modules.js"></script>
        <script>
          var moduleA = angular.module("MyModuleA", []);
          moduleA.controller("MyControllerA", function($scope) {
              $scope.name = "Bob A";
          });

          var moduleB = angular.module("MyModuleB", []);
          moduleB.controller("MyControllerB", function($scope) {
              $scope.name = "Steve B";
          });
        </script>
    </head>
    <body>
        <div ng-modules="MyModuleA, MyModuleB">
            <h1>Module A, B</h1>
            <div ng-controller="MyControllerA">
                {{name}}
            </div>
            <div ng-controller="MyControllerB">
                {{name}}
            </div>
        </div>

        <div ng-module="MyModuleB">
            <h1>Just Module B</h1>
            <div ng-controller="MyControllerB">
                {{name}}
            </div>
        </div>
    </body>
</html>