I have a register page that uses text inputs as well as an avatar input. There's another part in the website where the avatar input is also used, but it's used alone this time. So I'd like to make it reusable and since it's coupled to a part of a view, I want to use a controller for this.

Simplified, here's how it looks like :

<body ng-controller="RegisterController as RegisterCtrl">
<form ng-submit="RegisterCtrl.submit(AvatarCtrl)">
    <div class="avatar" ng-controller="AvatarController as AvatarCtrl">
        <input type="file" ng-model="AvatarCtrl.avatar" />

    <input type="text" ng-model="RegisterCtrl.credentials.name" />
    <input type="submit" value="Submit" />

I thought about using events, but I thought I needed the AvatarController data to work with, and that was the most simple way to do it.

  • Are you able to reference the AvatarCtrl outside of its ng-controller section? It might make more sense to have the inner controller be a $scope property in RegisterCtrl. There's also the weird scope inheritance with Angular, you might want to read up on how that works.
    – Andrew
    Jun 27 '16 at 19:10
  • Sure it'd make more sense, but I won't be able to reuse the part that's defined in div.avatar somewhere else since it'll be bound to the RegisterController, right ? Jun 27 '16 at 19:14
  • If you make it a separate controller that you pass into RegisterController, then I think you could. Something like app.controller('register_controller', ['avatar_controller'], function (avatar_controller) { ... };
    – Andrew
    Jun 27 '16 at 19:17
  • Do you need it to be a controller, or could you make it a service?
    – TMN
    Jun 28 '16 at 13:29
  • @TMN I need it to be a controller because I need a $scope for an external directive which is doing a $scope.$apply Jun 28 '16 at 15:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.