Angularjs 在一个页面中调用多个模块？_Angularjs_Angularjs Directive_Module_Ng Controller_Ng App

Angularjs 在一个页面中调用多个模块？

angularjs module

Angularjs 在一个页面中调用多个模块？,angularjs,angularjs-directive,module,ng-controller,ng-app,Angularjs,Angularjs Directive,Module,Ng Controller,Ng App,我在一个页面中创建了module1和module2模块1工作正常，模块2不工作。请建议如何在单个页面中正确调用module1和module2 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min

我在一个页面中创建了

module1

和

module2

<代码>模块1工作正常，

模块2

不工作。请建议如何在单个页面中正确调用

module1

和

module2

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script>
        var mymodule1 = angular.module('module1', []);

        mymodule1.directive('btnDirective', function() {
            return {
                restrict: 'E',
                template: '<table>' +
                    '<tr><td>Enter a value:<input type="text" ng-model="a" /></td></tr>' +
                    '<tr><td>Enter b Value:<input type="text" ng-model="b" /></td></tr>' +
                    '<tr><td><button ng-click="add(a,b)">Add</button></td></tr>' +
                    '<tr><td>Sum of two number {{sum}}</td></tr>' +
                    '</table>',

                link: function($scope, element, attrs) {

                    $scope.sum = 0;
                    $scope.add = function(a, b) {
                        $scope.sum = parseInt(a) + parseInt(b);
                    }
                }
            };
        });
        var mymodule2 = angular.module('module2', []);

        mymodule2.controller('controller2', function($scope) {
            $scope.name = 'Second Module Controller!';
        });

        angular.bootstrap(document.getElementById("app2"), ['module2']);
    </script>
</head>
<body>
    <h3>Creating Custom Element Directive</h3>
    <br />
    <div ng-app="module1">
        <btn-directive></btn-directive>
    </div>
    <h1>my module2</h1>
    <div id="app2" ng-app="module2" ng-controller="controller2">
        Name: {{name}}
    </div>
</body>
</html>


var mymodule1=angular.module（'module1'，[]）；
mymodule1.directive（'btnDirective'，function（）{
返回{
限制：'E'，
模板：“”+
'输入一个值：'+
'输入b值：'+
“添加”+
'两个数之和{{Sum}}'+
'',
链接：函数（$scope，element，attrs）{
$scope.sum=0；
$scope.add=函数（a，b）{
$scope.sum=parseInt（a）+parseInt（b）；
}
}
};
});
var mymodule2=angular.module（'module2'，[]）；
mymodule2.controller（'controller2'，函数（$scope）{
$scope.name='Second Module Controller！'；
});
bootstrap（document.getElementById（“app2”），['module2']）；
创建自定义元素指令


我的模块2
名称：{{Name}

您可以使用：

ng-app="module1"

这涉及到你的应用程序是

模块1

。您应该创建一个需要这两个模块的新模块（例如：

app

）

var app = angular.module('theapp', ['module1', 'module2']);

然后将

ng应用程序

替换为：

ng-app='theapp'

然后你可以有：

<body ng-app="theapp" ng-controller="controller2">
  <h3>Creating Custom Element Directive</h3><br />
  <div>
    <btn-directive></btn-directive>
    </div>
  <h1>my module2</h1>
  <div>
   Name: {{name}}
    </div>
</body>


创建自定义元素指令

我的模块2
名称：{{Name}

您可以使用：

ng-app="module1"

这涉及到你的应用程序是

模块1

。您应该创建一个需要这两个模块的新模块（例如：

app

）

var app = angular.module('theapp', ['module1', 'module2']);

然后将

ng应用程序

替换为：

ng-app='theapp'

然后你可以有：

<body ng-app="theapp" ng-controller="controller2">
  <h3>Creating Custom Element Directive</h3><br />
  <div>
    <btn-directive></btn-directive>
    </div>
  <h1>my module2</h1>
  <div>
   Name: {{name}}
    </div>
</body>


创建自定义元素指令

我的模块2
名称：{{Name}

您好，谢谢您的快速回复。我用ng app=“theapp”ng controller=“controller2”尝试过，但controller2仍不工作名称：{{{Name}}您检查过控制台了吗？因为听起来angular无法解析页面嗨，谢谢你的快速回复。我用ng app=“theapp”ng controller=“controller2”尝试过，但controller2仍不工作名称：{{{Name}}您检查过控制台了吗？因为听起来好像angular停止了对页面的解析