基于条件的angular.js导航
我有一个应用程序，假设有3个菜单。Home、Work和School。用户可以决定他要做什么，去工作还是去学校。每一个都需要时间，例如6个小时。当工作正在进行时，当用户单击(或导航到)学校时，我希望用户停留在同一页面上，并显示一个弹出窗口，警告他正在进行的工作。学校也是一样，如果用户点击工作，我希望他停留在当前页面，无论是家庭还是学校。我使用angular ui-router进行路由。
$stateProvider
.state('home', {
url: '/home',
controller: 'homeCtrl'
templateUrl: 'views/home.html'
})
.state('work', {
url: '/work',
controller: 'workCtrl',
templateUrl: 'views/work.html'
})
.state('school', {
url: '/school',
controller: 'schoolCtrl',
templateUrl: 'views/school.html'
})有一个状态变量，它告诉用户当前正在做什么。通过使用名为State的服务，可以从任何位置访问此状态变量。
var status = State.status;其中1=学校中的用户，2=工作中的用户，0=用户空闲。我怎么能停留在同一个页面上，只是根据条件打开一个弹出窗口，而不是导航到所选页面？
回答 2
Stack Overflow用户
发布于 2016-11-03 05:01:57
一种选择是使用在单击链接时调用的函数，而不是使用ui-sref。然后，您可以在您的函数中执行必要的步骤。
另一种选择是使用ui-router事件或转换挂钩(如果您使用>=1.0.0-alpha的ui-router)。然后，您可以在过渡期间进行检查，并在需要时取消检查。
如果您有一个控制所有过渡的菜单，则使用第一个选项将是最简单的。然而，如果你的链接散布在你的应用程序中。您可能想研究一下第二种选择。
例如，对于选项1：
function redirect() {
if (State.status === 0) {
$state.go('mytargetstate');
} else {
// do something else...
}
}Stack Overflow用户
发布于 2016-11-03 05:37:30
听起来你想要的是$scope.$watch，而不是有3个不同的状态，你应该只有一个。如果您希望每个模式的URL都不同，那么您需要在$stateProvider中设置主状态，如下所示：
$stateProvider
.state('main', {
url: '/:context', // Dynamic parameter
controller: 'mainCtrl'
templateUrl: 'views/main.html'
})这将允许您拥有具有动态上下文的单个状态。因此，url仍然是/home、/work或/school，但将使用一个模板views/main.html。然后将$stateParams注入到您的控制器中，并使用$stateParams.context访问上下文。如下所示：
State.status = $stateParams.context;
// then open the modal based on the $scope.State.status您还可以尝试在控制器中使用$scope.$watch()来监视限定了作用域的变量的更改。这些方法的组合将产生最好的结果。
$scope.$watch('State.status', function() {
switch( State.status ) {
case 'school':
// open school modal
break;
case 'work':
// open work modal
break;
case 'home':
// open home modal
break;
default:
console.log('wat');
break;
}
});https://stackoverflow.com/questions/40389304
复制相似问题
腾讯云开发者
