更改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屋！