albert albert - 1 year ago 288
AngularJS Question

md-tabs: setting variable for md-selected not working when calling function from inside ui-router

I have a

template containing
from which some tabs are static, others are created dynamically using
iterating through a given array of the data model.

Inside those dynamically created tabs there are three buttons to do the following

  • move tab left by one position

  • move tab right by one position

move tab
buttons call a function inside the same controller. The
value of the currently shown tabs as well as the desired direction (
for moving left,
for moving right) are passed to the function.

So the HTML-snippet for the view looks as follows:

<md-content flex layout-padding>
<md-tabs md-dynamic-height md-border-bottom md-autoselect md-swipe-content md-selected="selectedTab">
<md-tab id="{{ 'tab' + $index }}" data-ng-repeat="tab in tabs track by $index">
<md-tab-label>Tab {{ $index + 1 }}</md-tab-label>
<div flex layout="row">
<div flex><span class="md-headline">Tab {{ $index + 1 }}</span></div>
<div flex align="right">
<md-button ng-click="moveTab(-1, $index)">Move tab left</md-button>
<md-button ng-click="moveTab(1, $index)">Move tab right</md-button>
<p>This is tab {{ $index + 1 }}</p>

The function moving the tabs is implemented in

$scope.moveTab = function(direction, TabIdx) {
var staticTabs = 3

var arr = $scope.tabs
var fromIdx = sectorIdx
var toIdx = tabIdx + direction

// correct `toIdx` in order to prevent index overflow for first/last array element
if (toIdx < 0) {
toIdx = arr.length - 1
} else if (toIdx > arr.length-1) {
toIdx = 0
else {
; // nothing to do here since `toIdx` does not need to be corrected

var tab = arr.splice(fromIdx, 1)[0]
arr.splice(toIdx, 0, tab)

$scope.selectedTab = staticTabs + toIdx

After clicking the desired button to move a tab, the data of the according tab neigbour is displayed as desired.
This shows that maniupulating the
array works correctly. Additionally the log-message shows that even the new value for
is calculated correctly.
However, the new tab is not selected in the view.

This confuses me hence both variables
are defined in the same controller and should be part of the same
In addition, the manipulated
array is used in other views and shows the tab data in the new order, whereas the new value for
does not seem to be available and the shown tab does not change.

Answer Source

This was a problem of scope inheritance since data-bindings using other datatypes than objects do not have two-way-binding when inheriting the parent scope.

See the docs:

Scope inheritance is normally straightforward, and you often don't even need to know it is happening... until you try 2-way data binding (i.e., form elements, ng-model) to a primitive (e.g., number, string, boolean) defined on the parent scope from inside the child scope. It doesn't work the way most people expect it should work. What happens is that the child scope gets its own property that hides/shadows the parent property of the same name. This is not something AngularJS is doing – this is how JavaScript prototypal inheritance works. New AngularJS developers often do not realize that ng-repeat, ng-switch, ng-view and ng-include all create new child scopes, so the problem often shows up when these directives are involved. [...]

This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your ng-models [...]

After changing




in both the given HTML- and JS-snippets everything works as expected.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download