在具有相同控制器的子状态之间传递状态参数

Question

正在做一个项目，这是第一次实现 ui-router。情况是，我有父子状态，所有子状态都共享同一个控制器，因为它们都在同一个域（CRUD）上工作。

问题是，我在列表页面上单击编辑选项，然后状态更改为

/states/edit/1

很好，但是我所有的列表、编辑和更新功能都在同一个控制器中。当状态更改为 states.edit 我希望能够从列表子状态

传递参数

states.list

到

states.edit

我无法获取处于编辑状态的参数。这是代码：

$stateProvider.state('/dashboard', {
                    url: "/",
                    templateUrl: "/partials/dashboard.html"
                })
                .state('states', {
                    abstract:true,
                    url: "/states",
                    templateUrl: "/partials/manage-state.html",
                    controller:"stateManagementContrlr"
                })
                .state('states.list', {
                    url: "",
                    templateUrl: "/partials/state.list.html"
                })
                .state('states.create', {
                    url: "/create",
                    templateUrl: "/partials/create-state.html"
                })
                .state('states.edit', {
                    url: "/edit/:stateId",
                    templateUrl: "/partials/create-state.html",
                })

我做错了什么？问题 1：如何将 stateParams 从一个子状态传递到另一个。问题2：状态改变时如何触发函数？（状态改变监听好主意？）

小心，我只想用一个控制器处理所有这些。请帮我谢谢！

Answer 1

控制器应用于states，因此当您从states.list更改为states.edit时，控制器不会死掉。只需在控制器中声明一个变量来保存您的参数 var params = {...};

要触发函数，您可以通过 ng-click

调用函数

$scope.editEntry = function(id) {
  params.id = id;
  $state.go('states.edit');
};

或查看那些状态更改事件：State Change Events

$rootScope.$on('$stateChangeStart', 
function(event, toState, toParams, fromState, fromParams){ ... })

编辑：

我刚看到您还可以使用 $state.go()

填充 stateParams

$scope.editEntry = function(id) {
  $state.go('state.edit', {stateId: id});
};

Answer 2

我会选择状态嵌套。一般来说，我们仍然可以看到列表视图，同时导航到一些细节，或者编辑：

.state('states', {
    abstract:true,
    url: "/states",
    templateUrl: "/partials/manage-state.html",
    controller:"stateManagementContrlr"
})
.state('states.list', {
    url: "",
    templateUrl: "/partials/state.list.html"
})
.state('states.list.create', {
    url: "/create",
    templateUrl: "/partials/create-state.html"
})
.state('states.list.edit', {
    url: "/edit/:stateId",
    templateUrl: "/partials/create-state.html",
})

在这样的解决方案中，我们需要在 parent 'states.list' 模板中的某处占位符“<div ui-view></div>”：“/partials/state.list.html”

或者，我们也可以将其替换为绝对名称定位

.state('states.list.create', {
    url: "/create",
    views: {
      '@states': {
          templateUrl: "/partials/create-state.html"
       }
    }
})
.state('states.list.edit', {
    url: "/edit/:stateId",
    views: {
      '@states': {
          templateUrl: "/partials/create-state.html",
       }
    }        
})

如果 parent 将是 'states.list' 并且 'states.list.edit' 将是 child，我们会得到什么？好吧，我们可以通过原生 UI-Router 继承来分享日期。在这里查看更多：

Angular UI Router: keeping sibling views around on state change
How do I share $scope data between states in angularjs ui-router?

在具有相同控制器的子状态之间传递状态参数

Passing state params between child states with same controller

state

nested

view

angularjs

angular-ui-router