md-tabs：从 ui-router 内部调用函数时，为 md-selected 设置变量不起作用

Question

我有一个包含md-tabs 的ui-router 模板，其中一些选项卡是静态的，其他选项卡是使用ng-repeat 迭代数据模型的给定数组动态创建的。

在这些动态创建的选项卡中，有三个按钮可以执行以下操作

• 将标签向左移动一位
• 将标签右移一位

move tab 按钮调用同一控制器内的函数。当前显示的选项卡的$index 值以及所需的方向（-1 用于向左移动，1 用于向右移动）将传递给函数。

因此视图的 HTML-sn-p 如下所示：

<md-content flex layout-padding>
    <md-card>
        <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>
                <md-tab-body>
                    <md-card-title>
                        <md-card-title-text>
                            <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>
                                </div>
                            </div>
                        </md-card-title-text>
                    </md-card-title>
                    <md-card-content>
                    <p>This is tab {{ $index + 1 }}</p>
                    </md-card-content>
                </md-tab-body>
            </md-tab>
        </md-tabs>
    </md-card>
</md-content>

移动标签的功能在MainController中实现为：

$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
    console.log($scope.selectedTab)
}    

单击所需按钮移动选项卡后，根据需要显示相应选项卡邻居的数据。 这表明操作 $scope.tabs 数组可以正常工作。此外，日志消息显示，即使$scope.selectedTab 的新值也计算正确。 但是，视图中未选择新选项卡。

这让我很困惑，因此 $scope.tabs 和 $scope.selectedTab 两个变量都定义在同一个控制器中，并且应该是同一个 $scope 实例的一部分。 此外，操作后的$scope.tabs 数组在其他视图中使用并以新顺序显示选项卡数据，而$scope.selectedTab 的新值似乎不可用并且显示的选项卡没有更改。

Answer 1

这是范围继承的问题，因为使用其他数据类型而不是对象的数据绑定在继承父范围时没有双向绑定。

查看文档：

作用域继承通常很简单，但您通常不会 甚至需要知道它正在发生...直到您尝试 2-way 数据绑定 （即，表单元素，ng-model）到一个基元（例如，数字，字符串， boolean) 在子范围内的父范围上定义。它 不像大多数人期望的那样工作。发生什么了 是子作用域有自己的属性来隐藏/隐藏 同名的父属性。这不是 AngularJS 的东西 做——这就是 JavaScript 原型继承的工作原理。新的 AngularJS 开发人员通常没有意识到 ng-repeat、ng-switch、 ng-view 和 ng-include 都创建新的子范围，所以问题 当涉及这些指令时，通常会出现。 [...]

遵循原语可以很容易地避免这个问题 “最佳实践”总是有一个“。”在您的 ng 模型中 [...]

改变后

selectedTab

到

selectedTab.inputTab

在给定的 HTML- 和 JS-sn-ps 中，一切都按预期工作。