I am buliding an application in angular js.
I have two controllers for two views.
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>
only the first controller is getting executed.
Please advice
use like this
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>
You need to bootstrap each app as follows:
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']);
And 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>
EDIT JSFiddle
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.