Getting the scope within Angular UI tabs

Question

I'm having some trouble with angular scopes within the context of a tab (Angular UI).

Here is my jsfiddle example (slimmed down example showing fields on multiple tabs with a single submit button outside of the tabs).

Here is the basic html layout:

<form...>
  <tab>
    <pane>
      <input...>
    </pane>
  </tab>
</form>

Looking at the jsfiddle example, without the tabs if I submit a very basic form I would see the $scope.user be an object. Since the fields are within panes (tabs) the scope is incorrect. How can I get access to the submitted user object in createUser?

stackoverflow.com/questions/22772041/…

Bernardo Ramos
– Bernardo Ramos

2016-12-01 18:15:47 +00:00
Commented Dec 1, 2016 at 18:15 — Bernardo Ramos
– Bernardo Ramos, Commented Dec 1, 2016 at 18:15

Noah Freitas · Accepted Answer · 2013-04-01 22:18:27Z

8

The problem is that the user model is buried deep within an isolate scope. To get the code working as expected, you would need to alert out the value of $scope.$$childHead.panes[0].$$nextSibling.user.first_name not $scope.user. This is obviously not a solution.

A simple solution is to add an empty user object to the controller scope. The ng-model directives in your HTML will then bind to this property. Your controller should look like this:

function MyCtrl($scope) {
  $scope.user = {};
  $scope.createUser = function () {
    alert($scope.user);
  };
}

answered Apr 1, 2013 at 22:18

Noah Freitas

17.5k11 gold badges53 silver badges67 bronze badges

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

2 Comments

Arthur Frankel Over a year ago

Thank you! Makes perfect sense.

Mark Rajcok Over a year ago

+1. Note that in the OP's fiddle, the user object gets created on the directives' transcluded scopes (not the directives' isolate scopes).

Collectives™ on Stack Overflow

Getting the scope within Angular UI tabs

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related