Question

我尝试使用angularjs，webpack2进行模态弹出。

但有些问题困扰着我..

我想制作具有自定义网址但

的模态弹出窗口

在模态弹出窗口中，$state.current仍然表示父亲的状态。

当状态转换完全完成时，我搜索了onEnter函数。

同时，模态的状态未更新。（我认为这就是为什么模态的状态表明父母的状态）

我可以使用setTimeout函数获取模态自己的state和stateParams，但这只是技巧吗？

我怎样才能以正确的方式获得模态的状态？

===

这是我的app.js，

  // HOME
  .state('home', {
    url: '/',
    templateUrl: 'client/pages/home/home.html',
    controller: 'HomeController',
  })

  // PLAYER MODAL
  .state('player', {
    url: 'player/:playerName',
    parent: 'home',
    onEnter: function($stateParams, $state, $uibModal) {
      $uibModal.open({
        templateUrl: 'client/pages/player/player.html',
        resolve: {},
        controller: 'PlayerController'
      }).result.then(function (result) {
        // $scope.$close
        alert('result ->' + result);
      }, function (result) {
        // $scope.$dismiss
        alert('dismiss ->' + result);
      }).finally(function () {
        // handle finally
        return $state.go('home');
      });
    }
  });

HomeController中，

  angular.module('907degree')
  .controller('HomeController', function ($scope, $state) {
    $scope.state =  $state.current;
    $scope.players = ['messi', 'hazard', 'ronaldo'];

    $scope.showModal = function (playerId) {
      $state.go('player', { playerName: playerId });
    };
})

和PlayerController。

  angular.module('907degree')
  .controller('PlayerController', ($scope, $http, $state, $stateParams, itemService) => {
    $scope.playerState = $state.current;
    $scope.params = $stateParams.playerName;
    $scope.item = itemService.get($stateParams.id);

    $scope.ok = function () {
      $scope.$close('clicked OK');
    };

    $scope.dismiss = function () {
      $scope.$dismiss('clicked CANCEL');
    };

    $scope.checkState = function () {
      console.log($state.current, $stateParams);
      console.log($scope.playerName);
    }
  })

我认为我的回购比解决这个问题的人更好。所以这就是它。

git clone hagfish1210@gitlab.com/hagfish1210/907degrees.git＆amp; npm install＆amp; npm run dev

Answer 1

注入当前 $transition$ 。

onEnter: function($transition$, $state, $uibModal) {
  $uibModal.open({
    templateUrl: 'client/pages/player/player.html',
    resolve: { $transition$: () => $transition$ },
    controller: 'PlayerController'
  }).result.then(function (result) {
    // $scope.$close
    alert('result ->' + result);
  }, function (result) {
    // $scope.$dismiss
    alert('dismiss ->' + result);
  }).finally(function () {
    // handle finally
    return $state.go('home');
  });
}

在PlayerController中询问其参数的转换

angular.module('907degree')
  .controller('PlayerController', ($scope, $http, $state, $transition$, itemService) => {
    $scope.playerState = $state.current;
    var params = $transition$.params();
    $scope.params = params.playerName;
    $scope.item = itemService.get(params.id);

    $scope.ok = function () {
      $scope.$close('clicked OK');
    };

    $scope.dismiss = function () {
      $scope.$dismiss('clicked CANCEL');
    };

    $scope.checkState = function () {
      console.log($state.current, params);
      console.log($scope.playerName);
    }
  })

Transition类公开了有关正在运行的转换的大量信息：https://ui-router.github.io/ng1/docs/latest/classes/transition.transition-1.html#params

如何立即更新角度ui.router嵌套状态？

1 个答案: