Question

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

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

/状态/编辑/ 1

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

states.list

到

states.edit

我无法在编辑状态下获得params。这是代码：

$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",
})

在这样的解决方案中，我们需要一个占位符＆＃34; <div ui-view></div>＆＃34;在父'states.list'模板中的某处：＆＃34; /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",
       }
    }        
})

如果父母将成为'states.list'和'states.list.edit'，我们会获得什么？好吧，我们可以通过本机UI-Router继承来共享日期。点击此处了解更多信息：

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

2 个答案: