0

I have 2 list of items say, news and people.

These 2 lists have different logic and are located in different pages, so don't share shame ng-app: 

<!-- News.html -->
<div id="newsList" ng-app="newsListApp">
   <div id="{{news.id}}" ng-app="modalApp" ng-repeat="news in newsList">
      ...
   </div>
</div>

<!-- People.html -->    
<div id="peopleList" ng-app="peopleListApp">
   <div id="{{person.id}}" ng-app="modalApp" ng-repeat="person in people">
      ...
   </div>
</div>

I need to open each item in a modal popup, so I have to use a modalApp, but I want to use the same modalApp(that will use the same popup template) in the news and people lists...

What is the concept of sharing angular application/modules in cases like this?

serge
  • 13,940
  • 35
  • 121
  • 205

2 Answers2

2

You can't do it using ng-app. You have to manually bootstrap at least one of them. See this question for more info.

Community
  • 1
  • 1
R. Salisbury
  • 1,954
  • 16
  • 17
2

I think you are mixing up ng-app and ng-controller. Probably you are looking for something like this. In general angular only expects one app per page, and they certainly shouldn't be nested

<body ng-app="myApp">
  <div id="newsList" ng-controller="newsListCtrl">
    <div id="{{news.id}}" ng-controller="modalCtrl" ng-repeat="news in newsList">
      ...
    </div>
  </div>

  <div id="peopleList" ng-controller="peopleListCtrl">
    <div id="{{person.id}}" ng-controller="modalCtrl" ng-repeat="person in people">
       ...
    </div>
  </div>
</body>

https://docs.angularjs.org/api/ng/directive/ngController

Edit:
If news and people are different pages then you need a router of some kind. Your main options are ngRoute or ui-router. I think ui-router is more flexible to I would go with that. Couple of useful links that might help out:
https://scotch.io/tutorials/angular-routing-using-ui-router http://plnkr.co/edit/dd8Nk9PDFotCQu4yrnDg?p=preview

Tom Makin
  • 3,203
  • 23
  • 23
  • forgot to mention that news and people are 2 different pages... and share different logic, so aren't part of same myApp – serge Dec 04 '15 at 13:03
  • Could you explain a little how should I link routers with the shared "ng-application"...? – serge Dec 04 '15 at 13:40
  • Just follow the plnkr link above. Basically you need a single view per page. A view comprises an html template and a controller. Look at script.js in the plunkr link for how the controller and templates are linked together. – Tom Makin Dec 04 '15 at 13:43