In AngularJS, is having two calls in one ng-click an acceptable approach?

Question

In a single-page Angular app, I have a controller that acts as a tab handler for 3 screens:

app.controller('tabCtrl', function ($scope, getName) {
  $scope.tabs = {
    issue_list: {'id': 'issue_list', 'title': 'Issues reported'},
    issue_report: {'id': 'issue_report', 'title': 'Report issue'},
    user_prefs: {'id': 'user_prefs', 'title': 'Your preferences'}
  };
  $scope.tab = $scope.tabs.issue_list;
  $scope.activate = function(myid) {
    if (myid in $scope.tabs) {
      $scope.tab = $scope.tabs[myid];
    }
  };
});

Since I need to activate one of the tabs after a user successfully submits data via another controller:

app.controller('issueCtrl', function ($scope, $http, server, getName) {
  //lots of data-server stuff here
});

Because it's going to be needed from various places, I was about to rewrite 'tabCtrl' as a service, to avoid the whole calling one controller from another thing. But in the meantime I just called both controllers from one click:

<button id="raise" ng-click="addIssue();activate('issue_list')" type="button">send now</button>

Is this acceptable AngularJS practice? Seems a little clunky, but I'm new to Angular, have deadlines, and this 'just works'.

score 1 · Answer 1 · edited Oct 29 '13 at 06:39

1

For tabs you should consider writing a directive. They're generic enough that you'll reuse them in many places. I'm not suggesting you use the entire angular bootstrap UI project, but you should check out how they've constructed theirs as an inspiration.

http://angular-ui.github.io/bootstrap/#/tabs

edited Oct 29 '13 at 06:39

Mr Lister

45,515
15
108
150

answered Oct 28 '13 at 12:56

Mike Robinson

24,971
8
61
83

Thanks Mike - the angular bootstrap UI code for tabs is nice and informative. When we get time to tidy up I'll definitely be revisiting it. – Dave Everitt Nov 03 '13 at 08:46

score 1 · Accepted Answer · answered Oct 29 '13 at 07:32

Basically, all ngClick uses are simple hacks for event handling since you really don't want your event handling code littering your DOM. As your system grows in complexity, those ngClicks should evolve into their own directives that encapsulate more of the logic. If it works and you're on a deadline, go with it and move on to the next problem. That's part of the power of AngularJS, it's got a ton of convenient tools for quick solutions as well as a rich framework for cleaner architectural separation and modularity.

In AngularJS, is having two calls in one ng-click an acceptable approach?

2 Answers2