Angularjs not binding on second component when there are two same components are on the page | Community
Skip to main content
R
Rui_J
New Participant
October 16, 2015
Solved

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

  • October 16, 2015
  • 2 replies
  • 2726 views

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!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Runal_Trivedi

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

2 replies

A
awadheshv
New Participant
October 16, 2015

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%>

Runal_Trivedi
Runal_TrivediAccepted solution
New Participant
October 16, 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

Terms & ConditionsAccessibility statement

Loading footer...