更改AngularJS md-tabs的索引根本没有任何影响 [英] Change index of AngularJS md-tabs have no effect at all
问题描述
在我的Angular应用程序中,我有一个md-tabs,其md-selected指令绑定到我的控制器中的属性。我想将当前标签更改为索引由我的模板中的其他地方的ng-click调用的函数设置的标签。
我是这样做的:
< div ng-controller =TrackingCtrllayout-fill>
< md-content ng-if =isSmartlayout-fill>
< md-tabs md-selected =selectedIndexlayout-fill>
< md-tab> .........< / md-tab>
< md-tab> .........< / md-tab>
< md-tab> .........< / md-tab>
< md-tab>
< md-tab-label> {{'tracking.positions.TITLE'|翻译}}< / md-tab-label>
< md-tab-body>
< md-tab-content layout-fill flex>
< button ng-click =map.panTo(getPosition()); displayMap();>< / button>
< / md-tab-body>
< / md-tab>
< / md-tabs>
< / md-content>
< / div>
在我的控制器中我有:
$ scope.selectedIndex = 0;
$ scope.displayMap = function(){
$ scope.selectedIndex = 1;
};
但当我点击调用displayMap();
我检查过这个问题:
- 当我设置$ scope.selectedIndex = 1时;在我的控制器中,默认选项卡是索引为1的选项卡。确定
- 当我在模板中设置md-selected =1时,默认选项卡tab是索引为1的选项。确定
- 当我在代码中设置断点时,当我单击我的按钮时,调用displayMap(),和$ scope.selectedIndex = 1;被执行。 确定
似乎一切正常......除了标签不会改变。
我正在运行Angular Material 1.0.2
我甚至使用$ apply来强制更新(没有效果):
$ scope.selectedIndex = 0;
$ scope.displayMap = function(){
$ timeout(function(){
if(!$ scope。$$ phase){
$ scope。$ apply(function (){
$ scope.selectedIndex = 1;
});
}
});
};
我解决了我的问题,这肯定是由范围引起的问题。我只是使用控制器作为语法,并使用以下内容声明每个以前的范围数据:
var self =这个;
self.selectedIndex = 0;
self.displayMap = function(){
self.selectedIndex = 1;
};
和我的加价:
< div ng-controller =TrackingCtrl as trackinglayout-fill>
< md-content ng-if =tracking.isSmartlayout-fill>
< md-tabs md-selected =tracking.selectedIndexlayout-fill>
< md-tab> .........< / md-tab>
< md-tab> .........< / md-tab>
< md-tab> .........< / md-tab>
< md-tab>
< md-tab-label> {{'tracking.positions.TITLE'|翻译}}< / md-tab-label>
< md-tab-body>
< md-tab-content layout-fill flex>
< button ng-click =tracking.displayMap();>< / button>
< / md-tab-content>
< / md-tab-body>
< / md-tab>
< / md-tabs>
< / md-content>
< / div>
现在工作完美。我想我的ng-if正在修改我的范围左右。
In my Angular app, I have a md-tabs whose md-selected directive is binded to a property in my controller. I'd like to change the current tab to the one whose index is set by a function called by ng-click somewhere else in my template.
I did it this way:
<div ng-controller="TrackingCtrl" layout-fill>
<md-content ng-if="isSmart" layout-fill>
<md-tabs md-selected="selectedIndex" layout-fill>
<md-tab>.........</md-tab>
<md-tab>.........</md-tab>
<md-tab>.........</md-tab>
<md-tab>
<md-tab-label>{{ 'tracking.positions.TITLE' | translate }}</md-tab-label>
<md-tab-body>
<md-tab-content layout-fill flex>
<button ng-click="map.panTo(getPosition());displayMap();"></button>
</md-tab-body>
</md-tab>
</md-tabs>
</md-content>
</div>
In my controller I have :
$scope.selectedIndex = 0;
$scope.displayMap = function() {
$scope.selectedIndex = 1;
};
But it has no effect at all when I click my button which calls displayMap();
I've inspected the problem:
- When I set $scope.selectedIndex = 1; in my controller, the default tab is the one whose index is 1. OK
- When I set md-selected="1" in my template, the default tab is the one whose index is 1. OK
- When I set a breakpoint in my code, and when I click my button, displayMap() is called, and $scope.selectedIndex = 1; is executed. OK
It seems everything works fine... except the tab doesn't change.
I'm running Angular Material 1.0.2
I even used $apply to force update (no effect) :
$scope.selectedIndex = 0;
$scope.displayMap = function () {
$timeout(function () {
if (!$scope.$$phase) {
$scope.$apply(function () {
$scope.selectedIndex = 1;
});
}
});
};
I solved my problem which was certainly caused by a scope issue. I simply used the controller as syntax, and declared every previous scope data with:
var self = this;
self.selectedIndex = 0;
self.displayMap = function (){
self.selectedIndex = 1;
};
and my markup:
<div ng-controller="TrackingCtrl as tracking" layout-fill>
<md-content ng-if="tracking.isSmart" layout-fill>
<md-tabs md-selected="tracking.selectedIndex" layout-fill>
<md-tab>.........</md-tab>
<md-tab>.........</md-tab>
<md-tab>.........</md-tab>
<md-tab>
<md-tab-label>{{ 'tracking.positions.TITLE' | translate }}</md-tab-label>
<md-tab-body>
<md-tab-content layout-fill flex>
<button ng-click="tracking.displayMap();"></button>
</md-tab-content>
</md-tab-body>
</md-tab>
</md-tabs>
</md-content>
</div>
Works perfect now. I guess my ng-if was modifying my scope or so.
这篇关于更改AngularJS md-tabs的索引根本没有任何影响的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!