Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

[AEM Gems Webinar] Accelerating Experience Manager as a Cloud Service development with Rapid Development Environments
SOLVED

Angularjs not binding on second component when there are two same components are on the page

Avatar

Level 3

Hi,

  I created a very simple component, in side the component, I am using angularjs just to render a simple hello world. This is what I did, I create a component from CRXDE. On the jsp page, this is the code I wrote.

 

<%@include file="/apps/pwc/global.jsp" %> <% String clientID = currentNode.getIdentifier().replace("/", "_").replace(":",""); %> <div ng-app="myapp_<%=clientID%>"> <div ng-controller="HelloController" > <h2>Hello {{helloTo.title}} !</h2> </div> </div> <script> angular.module("myapp_<%=clientID%>", []) .controller("HelloController", function($scope) { $scope.helloTo = {}; $scope.helloTo.title = "World, AngularJS"; } ); </script>

But Only the first component showing the correct binding (Hello World, AngularJS), and the second component only shows Hello {{helloTo.title}}!

Can someone tell me what did I do wrong?

 

Thanks!

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

You cannot have more than one ng-app declaration on the page. Angular will consider only one ng-app and will ignore the other one.

Right way would be to include ng-app may be at body tag level so that there is always one ng-app per page. Under that app you can then include your multiple controllers.

If still you want to go with your current approach of multiple ng-app you will need to bootstrap all ng-app present on the page. Below article will explain how it can be achieved.

http://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page

-- Runal

View solution in original post

2 Replies

Avatar

Level 3

as per my understanding of angular, you cannot have same name for your controller even if they are in different modules. try naming your controller as HelloController_<%=clientID%>

Avatar

Correct answer by
Community Advisor

You cannot have more than one ng-app declaration on the page. Angular will consider only one ng-app and will ignore the other one.

Right way would be to include ng-app may be at body tag level so that there is always one ng-app per page. Under that app you can then include your multiple controllers.

If still you want to go with your current approach of multiple ng-app you will need to bootstrap all ng-app present on the page. Below article will explain how it can be achieved.

http://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page

-- Runal