当前位置: 首页 > 面试题库 >

AngularJS:在angular-ui-router中使用$ state.go将数据传递到状态

子车文康
2023-03-14
问题内容

我正在做一个文档编辑器。文档可以是Type A或TypeB。可以通过URL通过文档ID对其进行访问,但是如果文档是A或B类型,则该ID不能使它们清晰可见。

因此,我需要按id加载文档,根据其数据确定其类型,然后将其传递给TypeAController或TypeBController。

现在,使用ui-router,我有类似以下内容:

$stateProvider
.state('loading', {
    url: '/{documentId}',
    template: 'Loading...',
    controller: function ($stateParams, $state) {
        loadDocument($stateParams.documentId)
            .then(function (loadedDocument) {
                if (loadedDocument.type === 'A') {
                    $state.go('EditA');
                } else if (loadedDocument.type === 'B') {
                    $state.go('EditB');
                }
            })
    }
})
.state('A', {...})
.state('B', {...})

加载状态将加载文档,确定其类型,然后进入下一个状态。

令人沮丧的是,我找不到真正将加载的文档传递到下一个状态的方法!我可以提供一个可以插入文档的全局服务,也可以只传递文档的ID并在每种状态下再次加载它(希望这次是从缓存中加载),但是这些方法非常笨拙关于角度和角度用户界面的操作是如此顺利。

有什么建议?


问题答案:

一种解决方案是将其移动到所有孩子都可以使用的父状态。像这样:

$stateProvider
.state('loading', {
    url: '/{documentId}',
    template: 'Loading...',
    controller: function ($scope, $stateParams, $state) {
        loadDocument($stateParams.documentId)
            .then(function (loadedDocument) {

                // assign the document to the parent model $scope
                // in this case $scope.model.doc  
                $scope.model = { "doc" : loadedDocument };
                if (loadedDocument.type === 'A') {
                    $state.go('.EditA');
                } else if (loadedDocument.type === 'B') {
                    $state.go('.EditB');
                }
            })
    }
})
.state('loading.EditA', {...}) // here we can use the $scope.model.doc
.state('loading.EditB', {...}) // in every child state

$scope.model.doc表示参照共享文档。

在这里(UI-Router示例-contact.js),我们可以看到父级如何设置联系人集合,所有子状态都正在访问它。实际例子



 类似资料:
  • 本文向大家介绍angular-ui-router 使用$ state.go在状态之间转换,包括了angular-ui-router 使用$ state.go在状态之间转换的使用技巧和注意事项,需要的朋友参考一下 示例 $state.go 是速记法 $state.transitionTo $state.go(toState [,toParams] [,options]) 此方法自动将您的选项设置为{

  • 问题内容: 我刚刚开始学习angularjs,并且正在使用angular-ui- router。我正在尝试使用一种状态将数据从一种状态发送到另一种状态,但是我没有成功。这是我到目前为止的内容: 我没有故意包含html,因为我假设不需要它,请告诉我,我将添加它。 我将状态配置如下: 调用my时,将执行以下代码: 当页面处于活动状态时,我正在尝试打印: 正如状态所示,$ stateParams是一个空

  • 问题内容: 我有以下代码的视图: 目标是无需使用href即可过渡到新状态。不幸的是,上面的代码不会触发。 我还尝试为此视图在控制器中包括$ state: 但是仍然没有。transictionTo也似乎不起作用。 有人对如何进行这项工作有任何想法吗? 编辑:我只能通过分配使其工作: 在我的控制器内。这看起来很丑。如果没有将$ state分配给作用域,是否真的没有其他方法可以访问$ state? 问题

  • 本文向大家介绍angular-ui-router 将数据解析为状态,包括了angular-ui-router 将数据解析为状态的使用技巧和注意事项,需要的朋友参考一下 示例 您可以resolve在转换到状态时将数据转换为状态,通常在状态需要使用该数据或在某些提供的输入需要进行身份验证时解析为状态时非常有用。 定义状态时,您需要提供要解析到.resolve属性中的值的映射,每个解析后的值都应具有一个

  • 问题内容: 我正在尝试将一些模型数据打开时传递给模式窗口。当用户单击某个元素时,我想打开模式窗口并显示与单击的内容有关的更详细的信息。 我创建了一个插件,该插件可以将数据传递到模态窗口中,但其工作方式与我想要的一样。 我正在尝试使用ng-click传递数据: 谁能帮我这个?或指出正确的方向? 问题答案: 怎么样这个? 我添加了解决方案 而在我做的:注射后

  • 问题内容: 有没有之间的功能差异和? 在使用和在控制器被使用。 在HTML中,我将使用: 而在函数中,我将使用类似: 那么,是还是在之后添加一些内容?假设当前状态为。 问题答案: 和之间没有 功能上的 区别。参阅文件 激活状态 激活状态有三种主要方法: 致电。高级便利方法。 单击包含指令的链接。 导航到与状态关联的状态。 因此,这些操作最终都将执行相同的操作,正如我们在指令代码中所看到的: 它确实