Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
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