标签: angular-ui-router

我已经使用ui-router实现了angularjs单页面应用程序.

最初我使用一个不同的URL来识别每个州,但这是为了不友好的GUID打包网址.

所以我现在将我的网站定义为一个更简单的状态机.状态不是由URL标识的,而是根据需要简单地转换为,如下所示:

定义嵌套状态

angular
.module 'app', ['ui.router']
.config ($stateProvider) ->
    $stateProvider
    .state 'main', 
        templateUrl: 'main.html'
        controller: 'mainCtrl'
        params: ['locationId']

    .state 'folder', 
        templateUrl: 'folder.html'
        parent: 'main'
        controller: 'folderCtrl'
        resolve:
            folder:(apiService) -> apiService.get '#base/folder/#locationId'

过渡到定义的国家

#The ui-sref attrib transitions to the 'folder' state

a(ui-sref="folder({locationId:'{{folder.Id}}'})")
    | {{ folder.Name }}

这个系统工作得很好,我喜欢它干净的语法.但是,由于我没有使用URL,后退按钮不起作用.

如何保持我的整洁的ui-router状态机,但启用后退按钮功能？

我angular-ui-router在我的应用程序中使用和嵌套状态,我还有一个导航栏.导航栏是手写的,ui-sref-active用于突出显示当前状态.这是一个两级导航栏.

现在,当我进入时,说Products / Categories我希望两者Products(第1级)和Categories(第2级)都能突出显示.但是,使用ui-sref-active,如果我处于状态,Products.Categories则只突出显示该状态,而不是Products.

有没有办法Products在那个州强调？

这是一个两部分问题:

1. 我在$ stateProvider.state()中使用resolve属性来在加载控制器之前获取某些服务器数据.如何在此过程中显示加载动画？

2. 我有子状态也使用resolve属性.问题是ui-router似乎想要在加载任何控制器之前完成所有解析.有没有什么办法可以让他们在解析后解析父控制器,而不必等待所有的子解析？对此的答案也可能解决第一个问题.

我在我的应用程序中对路由器进行单元测试时遇到了一些麻烦,该应用程序是在Angular ui路由器上构建的.我想测试的是状态转换是否适当地改变了URL(稍后会有更复杂的测试,但这是我开始的地方.)

这是我的应用程序代码的相关部分:

angular.module('scrapbooks')
 .config( function($stateProvider){
    $stateProvider.state('splash', {
       url: "/splash/",
       templateUrl: "/app/splash/splash.tpl.html",
       controller: "SplashCtrl"
    })
 })

和测试代码:

it("should change to the splash state", function(){
  inject(function($state, $rootScope){
     $rootScope.$apply(function(){
       $state.go("splash");
     });
     expect($state.current.name).to.equal("splash");
  })
})

关于Stackoverflow(以及官方的ui路由器测试代码)的类似问题建议在$ apply中包装$ state.go调用应该足够了.但我已经这样做了,州仍然没有更新.$ state.current.name保持为空.

我是Ionic的移动应用程序开发新手.在登录和注销时,我需要重新加载页面,以便刷新数据,然而,$state.go('mainPage')在不重新加载的情况下将用户带回视图 - 从不调用其后面的控制器.

有没有办法在Ionic中清除历史并重新加载状态？

我搜索了一个类似的问题,但出现的问题似乎略有不同.我试图动态更改链接的ui-sref =''(此链接指向向导表单的下一部分,下一部分取决于在下拉列表中进行的选择).我只是试图根据选择框中的一些选择设置ui-sref属性.我可以通过绑定到在进行选择时设置的范围属性来更改ui-sref.但是链接不起作用,这有可能吗？谢谢

  <a ui-sref="form.{{url}}" >Next Section</a>

然后在我的控制器中,我以这种方式设置url参数

switch (option) {
  case 'A': {
    $scope.url = 'sectionA';
  } break;
  case 'B': {
    $scope.url = 'sectionB';
  } break;
}

或者,我使用指令通过根据在选择框(下拉列表)上选择的选项生成具有所需ui-sref属性的超链接来使其工作.

无论如何这意味着每次从选择框中选择不同的选项时我必须重新创建链接,这会导致不希望的闪烁效果.我的问题是,是否有可能通过改变控制器中url的值来改变ui-sref的值,因为我试图在上面做,或者我每次选择时都必须使用指令重新创建整个元素就像我在下面做的那样？(只是为了完整性而显示)

选择选项指令(该指令生成链接指令)

define(['app/js/modules/app', 'app/js/directives/hyperLink'], function (app) {
app.directive('selectUsage', function ($compile) {

    function createLink(scope,element) {
        var newElm = angular.element('<hyper-link></hyper-link>');
        var el = $(element).find('.navLink');
        $(el).html(newElm);
        $compile(newElm)(scope);
    }

    return {

        restrict: 'E',
        templateUrl: '/Client/app/templates/directives/select.html'

        ,link: function (scope, element, attrs) {

            createLink(scope, element);

            element.on('change', function () {
                createLink(scope,element);
            })
        }
    }
})

超链接指令

define(['app/js/modules/app'], function (app) …

考虑以下:

.state('manager.staffList', {url:'^/staff?alpha', templateUrl: 'views/staff.list.html', data:{activeMenu: 'staff'}, controller: 'staffListCtrl'})
.state('manager.staffDetail', {url:'^/staff/{id}' , templateUrl: 'views/staff.html', data:{activeMenu: 'staff'}, controller: 'staffDetailsCtrl'})
  .state('manager.staffDetail.view', {url:'/view',  templateUrl: 'views/staff.details.html', data:{activeMenu: 'staff'}})
    .state('manager.staffDetail.view.schedule', {url:'/schedule', templateUrl:'views/staff.view.schedule.html', data:{activeMenu: 'staff'}})
    .state('manager.staffDetail.view.history', {url:'/history' , templateUrl:'views/staff.view.history.html', data:{activeMenu: 'staff'}})
    .state('manager.staffDetail.view.log', {url:'/log', templateUrl:'views/staff.view.log.html', data:{activeMenu: 'staff'}})
    .state('manager.staffDetail.view.files', {url:'/files', templateUrl:'views/staff.view.files.html', data:{activeMenu: 'staff'}})
  .state('manager.staffDetail.edit', {url:'/edit',  templateUrl: 'views/staff.edit.html', data:{activeMenu: 'staff'}})

如果我去domain.com/staff/1234/view,我如何默认为manager.staffDetail.view.schedule子状态？

我正在使用angular-ui-router库,我遇到了URL问题.

我有以下代码:

app.js:

app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
    .state('state', {
        url: '/state',
        templateUrl: 'templates/state.html',
        onEnter: function () {
            /*... code ...*/
        }
    })});

index.html的:

<a href="#/state">STATE</a>

这有效,但是当我从<a>标签中删除"#"时,这不起作用.

如何从网址中删除"#"符号？

我正在尝试使用$ state.go函数实现"在新选项卡中打开链接"功能.如果有像这样的smth会很棒:

$state.go('routeHere', {
    parameter1 : "parameter"
    }, {
    reload : true,
    newtab : true // or smth like target : "_blank"
});

有没有办法用AngularJS做到这一点？

如果不在父控制器中使用服务或构建观察者,那么如何让儿童状态访问主控制器$scope.

  .state("main", {
      controller:'mainController',
      url:"/main",
      templateUrl: "main_init.html"
  })  
  .state("main.1", {
      controller:'mainController',
      parent: 'main',
      url:"/1",
      templateUrl: 'form_1.html'
  })  
  .state("main.2", {
      controller:'mainController',
      parent: 'main',
      url: "/2",
      templateUrl: 'form_2.html'
  })  

我无法在子状态下访问mainController范围 - 或者说我正在获取该范围的另一个实例 - 而不是我想要的.我觉得我错过了一些简单的事情.状态对象中有一个共享数据配置选项,但我不确定是否应将此类用于此类.