angular.js根据条件

时间:2016-11-02 20:34:39

标签: angularjs angular-ui-router

我有一个应用程序,可以说有3个菜单。 HomeWorkSchool。用户可以决定,他将要做什么,去工作或上学。每个都需要时间,例如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 个答案:

答案 0 :(得分:1)

一种选择是使用在单击链接时调用的函数,而不是使用ui-sref。然后你可以在你的功能中做出必要的步骤。

另一种选择是使用ui-routers事件或转换挂钩(如果你使用ui-router的> = 1.0.0-alpha)。然后,您可以在转换期间进行检查,并在需要时取消。

如果您有一个控制所有过渡的菜单,使用第一个选项将是最简单的。但是,如果您的链接分散在整个应用中。您可能想要查看第二个选项。

E.g。对于选项1:

function redirect() {
  if (State.status === 0) {
    $state.go('mytargetstate');
  } else {
    // do something else...
  }
}

答案 1 :(得分:1)

听起来你想要的是version: '2' services: web: build: . command: python manage.py runserver volumes: - .:/app ports: - 5000:5000 links: - postgres env_file: - .env postgres: image: postgres:9.4 ports: - 5432:5432 environment: POSTGRES_PASSWORD: user POSTGRES_USER: password POSTGRES_DB: postgresdb ,而不是有3个不同的状态,你应该只有一个。如果您希望每个模态的网址不同,则需要在$scope.$watch中设置主要状态,如下所示:

$stateProvider

这将允许您具有动态上下文的单个状态。因此,网址仍为$stateProvider .state('main', { url: '/:context', // Dynamic parameter controller: 'mainCtrl' templateUrl: 'views/main.html' }) /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()