I need to create two scopes on my page with an AngularJS app that has the same name. The reason is I'm using a Wordpress theme that doesn't allow adding to the body tag. And I can't create a high level div with angular attributes because the theme will automatically add the closing div.
Both angular scopes are doing exactly the same thing.
Here's what I want:
<!-- lots of theme code here -->
<div ng-app="app" ng-controller="ctrl">some angular variables and HTML</div>
<!-- lots of theme code here -->
<div ng-app="app" ng-controller="ctrl">some angular variables and HTML</div>
When I do the above, the first angular scope executes fine but the 2nd seems to be ignored. I imagine because two ng-apps with the same name on the same page are not permissible.
In my JS file, I have only the "app" and "ctrl". Is there some other way to do this?
I could create two angular apps in the js file but then I have to duplicate all of my code...right?
Wouldn't it maybe be easiest/simplest to just add the above two directives to the body tag using javascript?
You should use angular.bootsrap to initialize you app on your page,
Do add your code inside angular.element ready event that will intialize your angular app when DOM gets ready.
angular.element(document).ready(function() {
//document inside angular.bootstrap could be replaced by any element selector,
//wherever you want to inject your angular app
angular.bootstrap(document, ['myApp']);
});
I believe using above above approach would be better, Thanks.
Simple solution: just add the ng-app and ng-controller to the body tag dynamically using javascript. The script must got at the bottom of the page so the DOM can fully load first.