Question

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

<!DOCTYPE html>
<html>
<head>
<title>EggHead IO</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/lib/angular.js"></script>
<script>
var app=angular.module('ctrldemo', []);
app.controller('FirstCtrl', function($scope){
    $scope.name="yashdeep",
    $scope.age="21"

});
var papa=angular.module('anodemo', []);
papa.controller('anoFirstCtrl', function($scope){
    $scope.name="yamini";
    $scope.age="22"
});
</script>
</head>
<body>
<div ng-app="ctrldemo" ng-controller="FirstCtrl">
<input type="text" ng-model="greeting"/>
<div>
    {{greeting+"  "+name+"  "+age}}
</div>
</div>

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

Answer 1

如果您想运行多个角度应用，则需要使用角度.bootstrap()

手动引导应用。

var app = angular.module('ctrldemo', []);
app.controller('FirstCtrl', function ($scope) {
    $scope.name = "yashdeep",
    $scope.age = "21"

});

angular.bootstrap(document.getElementById('ctrldemo'), ['ctrldemo']);

var papa = angular.module('anodemo', []);
papa.controller('anoFirstCtrl', function ($scope) {
    $scope.name = "yamini";
    $scope.age = "22"
});

angular.bootstrap(document.getElementById('anodemo'), ['anodemo']);

您还需要从HTML中删除ng-app

<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>

小提琴：http://jsfiddle.net/03qj5pwf/

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

Answer 2

页面中只能有一个ng-app，而角度只能被引导一次。

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

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

<html ng-app="ctrldemo">

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

Answer 3

如果你打算尽力做到最好的话就是使用指令。这就是我做的。它叫做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>

多个控制器未运行

3 个答案: