Skip to content

Instantly share code, notes, and snippets.

@in-async

in-async/not-shared-rootScope.html

Last active August 29, 2015 14:16
Show Gist options
  • Save in-async/441f9dfaf6e27069a1fe to your computer and use it in GitHub Desktop.
Save in-async/441f9dfaf6e27069a1fe to your computer and use it in GitHub Desktop.
Download ZIP
rootScope is not shared between multiple ng-app. results in the [JS Bin](http://jsbin.com/gist/441f9dfaf6e27069a1fe).
Raw
not-shared-rootScope.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>rootScope is not shared between multiple ng-app.</title>
<style>
#div1 {
background: #dfd;
}
#div2 {
background: #ddf
}
</style>
</head>
<body>
<div id="div1" ng-app="app1" ng-controller="ctrl1">
<p>app1</p>
<p>{{rootScopeId}}</p>
<p>{{rootScope.val}}</p>
<input type="text" ng-model="rootScope.val" />
</div>
<div id="div2" ng-controller="ctrl2">
<p>app2</p>
<p>{{rootScopeId}}</p>
<p>{{rootScope.val}}</p>
<input type="text" ng-model="rootScope.val" />
</div>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
angular.module('app1', [])
.controller('ctrl1', ['$scope', '$rootScope', function($scope, $rootScope) {
console.log('app1');
$scope.rootScopeId = $rootScope.$id;
$scope.rootScope = $rootScope;
$rootScope.val = 'foo';
}]);
angular.module('app2', [])
.controller('ctrl2', ['$scope', '$rootScope', function($scope, $rootScope) {
console.log($scope);
$scope.rootScopeId = $rootScope.$id;
$scope.rootScope = $rootScope;
$rootScope.val = 'bar';
}]);
$(function() {
angular.bootstrap($('#div2'), ['app2']);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment