UI-Router - 根据状态变化动态显示和隐藏元素

Question

我遇到了一个问题，即我根据状态更改动态显示和隐藏按钮，但对于应该隐藏按钮的情况，我观察到按钮隐藏之前有明显的延迟。

按钮本身设置为指令如下：

指令

angular.module('app').directive('myActionButton', function() {
  return {
    restrict: 'E',
    templateUrl: 'myActionButton.html',
    controller: function($scope, $rootScope, MyActionButton) {
      $scope.myActionButton = MyActionButton;
      return $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
        return $scope.myActionButton.hide();
      });
    }
  };
});

模板

<md-button ng-show="myActionButton.visible" class="md-fab md-fab-bottom-right" aria-label="Add" ng-click="myActionButton.mainAction($event)">
  <md-icon class="material-icons">add</md-icon>
</md-button>

服务

var MyActionButton;

MyActionButton = function() {
  var myActionButton;
  myActionButton = {};
  myActionButton.visible = false;
  myActionButton.mainAction = null;

  myActionButton.setMainAction = function(fn) {
    myActionButton.mainAction = fn;
    myActionButton.show();
  };

  myActionButton.clearMainAction = function() {
    myActionButton.mainAction = null;
    myActionButton.hide();
  };
  return myActionButton;
};

angular.module('app').service('MyActionButton', MyActionButton);

如您所见，我在指令的控制器中使用绑定服务。我还从绑定到我的应用程序中 ui-router 加载的视图的其他控制器中使用此服务。

在需要显示按钮的 ui-router 加载的页面控制器上，我注入我的服务并调用

MyActionButton.setMainAction(some function reference here)

这反过来又在服务本身中调用 show()。

这一切都很好，页面会在需要时显示按钮。但是对于不需要显示按钮的页面，我不会在页面控制器中调用我的服务来隐藏按钮。

相反，我在指令的控制器中监听 $stateChangeStart 事件，然后调用我的服务的 clearMainAction 函数。

对于不需要按钮的页面，这确实有效，但是从显示按钮的页面转换时，一旦状态更改完成，需要几秒钟才能隐藏。

另外，我应该提到我正在使用 angular material 及其 md-tabs，并在每个选项卡上配置了 ui-sref 属性。

谁能解释为什么我会看到按钮隐藏延迟？

谢谢

更新

这是一个基于我分享的代码的代码笔 - http://codepen.io/anon/pen/GpqLgL

从 Tab 1 到 2 或 3 单击时，您会看到该按钮暂时显示，然后在短暂延迟后隐藏。

Answer 1

该问题与当 css 转换应用于元素时 ngAnimate 如何与 ng-show 等核心指令集成有关。

如果ngAmimate 检测到 css 转换，它将执行一系列添加/删除附加类以允许元素执行 css 中设置的任何隐藏/显示动画。

如果您希望元素更突然地隐藏/显示，您可以修改该元素的 css 并调整时间或完全删除动画。

或者，您不能使用 ng-show 并通过切换类或设置内联显示样式自行管理显示