Menu
I have two ng-app like ;
<div ng-app="app1" > somexpression <div ng-app="app2"> some more expression </div> </div> is there any way to make it work? when I make a nested ng-app it doesn't work
I know that I can use two different controller but I don't want to use two controllers ---- EDIT -----
The thing is;
angular.module('AppName', [ 'angular-carousel' ]) SO I need somehow to change this ng-app to directive
437
AngularJS applications cannot be nested within each other. Do not use a directive that uses transclusion on the same element as ngApp . This includes directives such as ngIf , ngInclude and ngView .
Only one ngApp directive can be auto-bootloaded per HTML Document but you can have multiple apps as long as you manually bootstrap the subsequent ones.
If you really want to have two ng-controllers across a page you can do by separating divs. I have add some of my app. js codings in to the above post. I have two .
Nested Controllers: AngularJS allows using nested controllers. It means that you have specified a controller in an HTML element which is a child of another HTML element using another controller.
From the AngularJS document, the answer is no
http://docs.angularjs.org/api/ng/directive/ngApp
AngularJS applications cannot be nested within each other.
And if not nested, then it's OK, someone already asked this question, refer here:AngularJS Multiple ng-app within a page and the AnguarJS document
http://docs.angularjs.org/api/ng/directive/ngApp
Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead.
119
I found one tricky solution for this problem. The idea is that the "host" application have to somehow jump over the root element of nested application. I used directive for this:
angular.module("ng").directive("ngIsolateApp", function() { return { "scope" : {}, "restrict" : "AEC", "compile" : function(element, attrs) { // removing body var html = element.html(); element.html(''); return function(scope, element) { // destroy scope scope.$destroy(); // async setTimeout(function() { // prepare root element for new app var newRoot = document.createElement("div"); newRoot.innerHTML = html; // bootstrap module angular.bootstrap(newRoot, [attrs["ngIsolateApp"]]); // add it to page element.append(newRoot); }); } } } }); Example simple app:
// module definition angular.module("testMod1",[]) .service("moduleService", function ModuleService() { this.counter = 0; this.getCounter = function() { return this.counter; }; this.incCounter = function() { this.counter += 1; } }) .controller("ModuleCtrl", function(moduleService) { this.getValue = function() { return moduleService.getCounter(); }; this.incValue = function() { moduleService.incCounter(); }; }); Now in the markup we can use the ng-isolate-app:
<!-- App instance 1 --> <body ng-app="testMod1"> <div ng-controller="ModuleCtrl as ctrl"> {{ctrl.getValue()}} <button ng-click="ctrl.incValue()">Click</button> <!-- App instance 2 --> <div ng-isolate-app="testMod1"> <div ng-controller="ModuleCtrl as ctrl"> {{ctrl.getValue()}} <button ng-click="ctrl.incValue()">Click</button> <!-- App instance 3 --> <div ng-isolate-app="testMod1"> <div ng-controller="ModuleCtrl as ctrl"> {{ctrl.getValue()}} <button ng-click="ctrl.incValue()">Click</button> </div> </div> </div> </div> </div> </body> Working example on plnkr
This works in simple cases, I do not know how this will work on complex applications.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
