我有一个包含ui-router
的{{1}}模板,其中一些标签是静态的,另一些是使用md-tabs
动态创建的,迭代通过给定的数据模型数组。
在这些动态创建的标签中,有三个按钮可以执行以下操作
ng-repeat
按钮调用同一控制器内的函数。当前显示的标签的move tab
值以及所需的方向(向左移动$index
,向右移动-1
)将传递给该函数。
因此视图的HTML片段如下所示:
1
移动标签的功能在<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
单击所需按钮以移动选项卡后,将根据需要显示相应选项卡neigbour的数据。
这表明,$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
的新值似乎不可用,并且显示的选项卡不会更改。
答案 0 :(得分:5)
这是范围继承的问题,因为使用除对象之外的其他数据类型的数据绑定在继承父范围时不具有双向绑定。
参见文档:
范围继承通常是直截了当的,你通常不会 甚至需要知道它正在发生......直到你尝试双向数据绑定 (即表格元素,ng-模型)到基元(例如,数字,字符串, boolean)在子范围内从父范围定义。它 没有像大多数人期望的那样工作。怎么了 是孩子范围得到自己的隐藏/阴影的属性 同名的父属性。这不是AngularJS的内容 做 - 这就是JavaScript原型继承的工作原理。新 AngularJS开发人员通常没有意识到ng-repeat,ng-switch, ng-view和ng-include都创建了新的子范围,所以问题就出现了 经常出现涉及这些指令的时候。 [...]
通过遵循以下内容,可以轻松避免使用原语这个问题 &#34;最佳实践&#34;总是有一个&#39;。在您的ng-models [...]
中
更改后
selectedTab
到
selectedTab.inputTab
在给定的HTML和JS片段中,一切都按预期工作。