更改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,一个OK
• 当我设置MD-选择="1"在我的模板,默认的选项卡,其指数是1,一个OK
• 当我在代码中设置断点时,当我单击我的按钮时,将调用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讨论.

由于您的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正在修改我的范围左右.