using 2 controllers on a page with angularjs

Question

I'm trying to assign two controllers to a page but i'm finding hard to get through with angular js

HTML

    <div data-ng-controller="useraccount" ng-repeat="item in userphotos">
          <ul id="navlist">
            <li>
              {{item.username}}
            </li>
          </ul>
     </div>

<div data-ng-controller="userphotos_ctrl" ng-repeat="item in userphotos">
      <ul id="navlist">
        <li>
          <img class="thumbnail" ng-src="http://localhost/myapp/resize_image/image.php?image={{item.pic}}&new_width=400&new_height=400">
        </li>
      </ul>
 </div>

JS

 .state('tabs.useraccount',{
        url:'/useraccount',
        views:{
        'list-source':{
        templateUrl:  'templates/user/user_account.html', 
        controller: 'useraccount_ctrl'
        } 
        }
    })

controllers

.controller('useraccount_ctrl',['$scope','$http',function($scope,$http){
$http.get('http://localhost/app/templates/user/user_account.php').success(function(data){
       $scope.useraccount=(data) ;
       //console.log(JSON.stringify(data));
   });
}])

.controller('userphotos_ctrl',['$scope','$http',function($scope,$http){
$http.get('http://localhost/app/templates/user/photos.php').success(function(data){
       $scope.userphotos=(data) ;
       console.log(JSON.stringify(data));
   });
}])

the result i get is only results for controller "useraccount_ctrl" works but userphotos_ctrl controller doesn't

This may be a copy/paste typo, but in the template the controller is "useraccount" and in the JS it's "useraccount_ctrl". — Erik
– Erik, Commented Jul 12, 2016 at 12:04
Also (can be a typo as well), you have ng-repeat="item in userphotos" both in the first and second div, maybe you need ng-repeat="item in useraccount"? — rpadovani
– rpadovani, Commented Jul 12, 2016 at 12:06

Community · Accepted Answer · 2017-05-23 11:58:52Z

-1

Using Angular UI Router allows you to only specify one controller in your state definition, which will be dynamically linked to your view. There are some options to work it around:

Using two directives (see this question).
Import your controller file manually with a static import. You will be able, from your page, to access every controller inside your file:

<script type="text/javascript" src="path/to/controller.js">

Problem is, using UI router you would want some more clarity in your view definitions, and not rely on static imports (which are messy when you try to build nice applications). That is why you should go for the first answer.

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Jul 12, 2016 at 12:16

Yassine Badache

1,8591 gold badge21 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yassine Badache Over a year ago

Please consider adding a comment when you downvote something (I would like to understand why). Thank you in advance

Collectives™ on Stack Overflow

using 2 controllers on a page with angularjs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related