Question

我正在尝试使用2与不同的型号和控制器，但一个正在工作，另一个不工作。禁用任何控制器都可以正常工作，但两者都不能协同工作，即使我已经声明了不同的变量。

var app1 = angular.module('myApp1', []);	
        app1.controller('myCtrl1', function($scope) 
	    {
		$scope.firstName1= "FirstName MyApp1_MyConrl1    ";
		$scope.lastName1= "LastName MyApp1_MyConrl1";
	    });


        var app2 = angular.module('myApp2', []);	
        app2.controller('myCtrl2', function($scope) 
	    {
		  $scope.firstName2= "FirstName MyApp2_MyConrl2   ";
		  $scope.lastName2= "LastName MyApp2_MyConrl2";
	    });

<!DOCTYPE html>
        <html>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <body>

        <div ng-app="myApp1" ng-controller="myCtrl1">

        First Name: <input type="text" ng-model="firstName1"><br>
        Last Name: <input type="text" ng-model="lastName1"><br>
        <br>
        Full Name: {{firstName1 + " " + lastName1}}

        </div>

        <div ng-app="myApp2" ng-controller="myCtrl2">

        First Name: <input type="text" ng-model="firstName2"><br>
        Last Name: <input type="text" ng-model="lastName2"><br>
        <br>
        Full Name: {{firstName2 + " " + lastName2}}

        </div>


        </body>
        </html>

Answer 1

基于Angular document：

每个HTML文档只能自动引导一个AngularJS应用程序。在文档中找到的第一个ngApp将用于定义作为应用程序自动引导的根元素。要在HTML文档中运行多个应用程序，必须使用angular.bootstrap手动引导它们

每个HTML文档只能有一个ngApp属性：

<div ng-app="myApp1" ng-controller="myCtrl1">

First Name: <input type="text" ng-model="firstName1"><br>
Last Name: <input type="text" ng-model="lastName1"><br>
<br>
Full Name: {{firstName1 + " " + lastName1}}

</div>

<div id="#app2" ng-controller="myCtrl2">

First Name: <input type="text" ng-model="firstName2"><br>
Last Name: <input type="text" ng-model="lastName2"><br>
<br>
Full Name: {{firstName2 + " " + lastName2}}

</div>

你应该手动引导第二个角度应用程序：

var app1 = angular.module('myApp1', []);    
app1.controller('myCtrl1', function($scope) 
{
    $scope.firstName1= "FirstName MyApp1_MyConrl1";
    $scope.lastName1= "LastName MyApp1_MyConrl1";
});


var app2 = angular.module('myApp2', []);    
app2.controller('myCtrl2', function($scope) 
{
    $scope.firstName2= "FirstName MyApp2_MyConrl2   ";
    $scope.lastName2= "LastName MyApp2_MyConrl2";
});
angular.bootstrap(document.querySelector("#app2"), ['myApp2']);

Answer 2

由于此主题没有答案，我研究发现我们只能创建一个 ng-app但多个控制器这是一个例子（请查看我以前的问题代码，将其与新代码进行比较）新守则： -

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">                  </script>
<body>
<div ng-app="myApp">
<div ng-controller="myCtrl1">
First Name: <input type="text" ng-model="firstName1"><br>
Last Name: <input type="text" ng-model="lastName1"><br>
<br>
Full Name: {{firstName1 + " " + lastName1}}
</div>
<div ng-controller="myCtrl2">
First Name: <input type="text" ng-model="firstName2"><br>
Last Name: <input type="text" ng-model="lastName2"><br>
<br>
Full Name: {{firstName2 + " " + lastName2}}
</div>
</div> 
</body>
</html>
<script language="javascript" type="text/javascript">
var onlyOneApp = angular.module('myApp', []);   
onlyOneApp.controller('myCtrl1', function($scope) 
{$scope.firstName1= "";
$scope.lastName1= "";
}); 
onlyOneApp.controller('myCtrl2', function($scope) 
{$scope.firstName2= "";
$scope.lastName2= "";
});
</script>

我如何使用angularjs多个div

2 个答案: