Question

我正在使用标签式显示器，我需要一个操作按钮，根据ui-router中的当前状态有条件地显示\ hide。

我正在使用一个指令，然后使用一个服务来保存一个可见性属性（其他东西会在这里存在，例如点击按钮时的主要动作功能）。

我发现隐藏按钮有一个小但明显的延迟，看看我的例子here

JS代码段：

(function(angular, undefined) {
    "use strict";
    angular.module('dsntApp', ['ngMaterial', "ui.router"])
    .config(function($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise('/tab/dash');
        $stateProvider
        .state('view1', {
            url: "/view1",
            templateUrl: "partials/view1.html"
        })
        .state('view2', {
            url: "/view2",
            templateUrl: "partials/view2.html"
        })
        .state('view3', {
            url: "/view3",
            templateUrl: "partials/view3.html"
        })
        ;
    })
    .run(function($rootScope, PrimaryAction){
      $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
        console.log(toState.name)
        switch (toState.name) {
          case 'view1':
            return PrimaryAction.show();
          case 'view2':
            return PrimaryAction.hide();
          case 'view3':
            return PrimaryAction.show();
          default:
            return PrimaryAction.hide();
        }
      });
    })
    .controller('tabCtrl', function($scope, $location, $log, $state) {
        $scope.selectedIndex = 0;

        $scope.$watch('selectedIndex', function(current, old) {
            switch (current) {
                case 0:
                    $location.url("/view1");
                    break;
                case 1:
                    $location.url("/view2");
                    break;
                case 2:
                    $location.url("/view3");
                    break;
            }
        });
    })
    .directive('primaryActionButton', function(){
      return {
        restrict: 'E',
        template:  ['<md-button ng-show="primaryAction.visible" class="md-fab md-fab-bottom-right" aria-label="Add" ng-click="primaryAction.mainAction()">',
  'ADD',
'</md-button>'].join(''),
        controller: function($scope, PrimaryAction) {
          $scope.primaryAction = PrimaryAction;
        }
      };
    })
    .service('PrimaryAction', function(){
      this.visible = false;
      this.show = function() {
        this.visible = true;
      }
      this.hide = function() {
        this.visible = false;
      }

    });

})(angular);

虽然这只是一个小延迟，但在我的真实版本中，我在标签更改期间加载了一些数据，这会导致按钮延迟隐藏。我想通过在$ stateChangeStart事件处理程序中调用我的服务show \ hide函数，只要单击第二个选项卡，该按钮就会被隐藏。

我在AngularJS的工作方式中遗漏了一些基本内容吗？我想知道由于状态转换或类似事件引起的消化周期是否有延迟，我是否会犯错？

由于

注意到基于ui-router状态更改使用ng-show的延迟

0 个答案: