AngularJS md-tabs 的更改索引根本没有效果

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;
              });
          }
      });
  };

原文由 user4856537 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我解决了我的问题，这肯定是由范围问题引起的。我简单地使用 控制器作为 语法，并声明每个以前的范围数据：

 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 正在修改我的范围。

原文由 user4856537 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

很高兴您找到了解决问题的方法。为了最初避免这种行为，您可能应该看看这个 stackoverflow 讨论。

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

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

 $scope.vm = {
  selectedIndex: 0
};

…遵循 点规则。

原文由 Moritz Herbert 发布，翻译遵循 CC BY-SA 3.0 许可协议