Question

在我的Angular应用程序中，我有一个md-tabs，其md-selected指令绑定到我的控制器中的属性。我想将当前标签更改为索引由我的模板中其他地方的ng-click调用的函数设置的标签。

我是这样做的：

<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>

在我的控制器中我有：

  $scope.selectedIndex = 0;
  $scope.displayMap = function() {
      $scope.selectedIndex = 1;
  };

但是当我点击调用displayMap（）;

的按钮时它完全没有效果

我已经检查了这个问题：

当我设置$ scope.selectedIndex = 1时;在我的控制器中，默认选项卡是索引为1的选项卡。确定
当我在模板中设置md-selected =“1”时，默认选项卡是索引为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;
              });
          }
      });
  };

Answer 1

我很高兴您找到了解决问题的方法。为了避免这种行为，你应该看看这个stackoverflow discussion。

由于您的selectedIndex变量包含一个原语，因此引入了每个新的Scope - 您已经提到过ngIf - 破坏数据绑定，子范围内的更改不会对'outside'产生影响。

在你的情况下，只需使用......

$scope.vm = {
  selectedIndex: 0
};

...遵循点规则。

Answer 2

我解决了我的问题，这肯定是由范围问题造成的。我只是将控制器用作语法，并使用以下内容声明每个以前的范围数据：

var self = this;
self.selectedIndex = 0;
self.displayMap = function (){
   self.selectedIndex = 1;
};

和我的标记：

<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>

现在完美无缺。我想我的ng-if正在修改我的范围左右。

Answer 3

也许我对你的问题有些误解，但这应该有用......

我创造了一个傻瓜，我不能重现你的行为，它只是工作正常。

查看：

<md-tabs class="md-accent" md-selected="selectedIndex">
  <md-tab id="tab1">
    <md-tab-label>Item One</md-tab-label>
    <md-tab-body>
      data.selectedIndex = 0;
    </md-tab-body>
  </md-tab>      
  <md-tab id="tab3">
    <md-tab-label>Item Two</md-tab-label>
    <md-tab-body>
      data.selectedIndex = 1;
    </md-tab-body>
  </md-tab>
</md-tabs>

<md-button ng-click="displayMap()">Map</md-button>

<强>控制器：

  function AppCtrl ( $scope ) {
    $scope.selectedIndex = 0;

    $scope.displayMap = function() {
      $scope.selectedIndex = 1; 
  };

你能检查一下吗？希望它有所帮助

Plunker here

Answer 4

这是我的解决方案：

    <Style x:Key="ForegroundStyleTrigger" TargetType="Run">
        <Style.Triggers>
            <DataTrigger Binding="{Binding Foo}" Value="0">
                <Setter Property="Foreground" Value="Red"></Setter>
            </DataTrigger>
        </Style.Triggers>
    </Style>

    <Style x:Key="BlueByDefault" BasedOn="{StaticResource ForegroundStyleTrigger}" TargetType="Run">
        <Setter Property="Foreground" Value="Blue" />
    </Style>


    <TextBlock>
        <Run Text="{Binding Foo, Mode=OneWay}" Style="{StaticResource ForegroundStyleTrigger}"/>
        <Run Text="{Binding Bar, Mode=OneWay}" Style="{StaticResource BlueByDefault}"/>
    </TextBlock>

Answer 5

如果md-selected = 0，则转到第一个选项卡。并且md-selected = 1到第二个标签。

按钮：

<md-button ng-click="displayMap()">Map</md-button>

控制器：

 $scope.displayMap = function() {
      $scope.selectedIndex = 1; //select second tab
  };

更改AngularJS md-tabs的索引根本没有任何影响

5 个答案: