角度js中单页中的多个应用程序

Question

我在角度js中建立一个应用程序。

我有两个控制器用于两个视图。

JavaScript的：

var myApp1 = angular.module('myApp1', []);
myApp1.controller('myController1', function($scope) {
    alert("check");
    $scope.x = 'test';
});
var myApp2 = angular.module('myApp2', []);
myApp2.controller('myController2', function($scope) {
    alert("check1");
    $scope.x = 'test';
});

HTML：

<div ng-app="myApp1">
            <div ng-controller="myController1">
                <input type="text" ng-model="x" /> {{x}}
            </div>
</div>

<div ng-app="myApp2">
            <div ng-controller="myController2">
                <input type="text" ng-model="x" /> {{x}}
            </div>
</div>

只有第一个控制器被执行。

请指教

Answer 1

像这样用

var myApp1 = angular.module('myApp1', []);

myApp1.controller('myController1', function($scope) {
    alert("check");
    $scope.x = 'test';
});

myApp1.controller('myController2', function($scope) {
    alert("check1");
    $scope.x = 'test';
});

HTML

<div ng-app="myApp1">
            <div ng-controller="myController1">
                <input type="text" ng-model="x" /> {{x}}
            </div>
 <div ng-controller="myController2">
                <input type="text" ng-model="x" /> {{x}}
            </div>

</div>

Answer 2

您需要按如下方式引导每个应用程序：

var myApp1 = angular.module('myApp1', []);
myApp1.controller('myController1', function($scope) {
    alert("check");
    $scope.x = 'test';
});
  angular.bootstrap(document.getElementById('myApp1Div'),['myApp1']);


var myApp2 = angular.module('myApp2', []);
myApp2.controller('myController2', function($scope) {
    alert("check1");
    $scope.x = 'test';
});
  angular.bootstrap(document.getElementById('myApp2Div'),['myApp2']);

和HTML

<div id="myApp1Div" >
            <div ng-controller="myController1">
                <input type="text" ng-model="x" /> {{x}}
            </div>
</div>

<div id="myApp2Div" >
            <div ng-controller="myController2">
                <input type="text" ng-model="x" /> {{x}}
            </div>
</div>

编辑 JSFiddle