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
BedrockMission!

Learn More

View all

Sign in to view all badges

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

Avatar

Avatar
Validate 10
Level 2
Rui_J
Level 2

Likes

4 likes

Total Posts

39 posts

Correct Reply

1 solution
Top badges earned
Validate 10
Validate 1
Boost 3
Boost 1
Affirm 1
View profile

Avatar
Validate 10
Level 2
Rui_J
Level 2

Likes

4 likes

Total Posts

39 posts

Correct Reply

1 solution
Top badges earned
Validate 10
Validate 1
Boost 3
Boost 1
Affirm 1
View profile
Rui_J
Level 2

15-10-2015

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!

View Entire Topic

Avatar

Avatar
Validate 1
MVP
Runal_Trivedi
MVP

Likes

45 likes

Total Posts

153 posts

Correct Reply

68 solutions
Top badges earned
Validate 1
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Validate 1
MVP
Runal_Trivedi
MVP

Likes

45 likes

Total Posts

153 posts

Correct Reply

68 solutions
Top badges earned
Validate 1
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
Runal_Trivedi
MVP

15-10-2015

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