Question

我正在尝试实现类似于此的选项卡式界面：http://odetocode.com/blogs/scott/archive/2014/04/14/deep-linking-a-tabbed-ui-with-angularjs.aspx

但是，在我的状态更改中，父状态的控制器似乎已重新初始化（或者创建了新的$ scope？）

示例plunkr与我的项目有两个主要区别。

我在我的网址中使用了一个参数
我为每个标签解决了状态更改的不同数据（删除此操作无效）。
我没有使用ui-bootstrap作为选项卡，但是在选项卡的ng-click上触发$ state.go。

我试验了上面的plunkr并在父状态下添加了一个下拉列表;但是，当子状态发生变化时，父下拉值似乎仍然存在。我并不太关心孩子的状态，反正可能最终会使用粘性状态。

在我尝试将另一个包添加到我的项目之前，我想知道我是否在做一些根本性的错误。

这是我想要做的事情的粗略说明：http://plnkr.co/edit/TmRQN5K8OEc8vHG84G5z?p=preview

这是我的配置：

  app.config(function($stateProvider, $urlRouterProvider){

        $urlRouterProvider.when('/main',
            function ($state) {

                $state.go('parent.tab1', { main_id: '00008' });
            });



            $stateProvider
            //Handle States Here 
            .state('parent', {
                abstract: true,
                url: '/parent?main_id',
                templateUrl: "main.html",
                controller: 'Main_Controller',
                resolve: {
                                //Calls to API
                }


            })


        .state('parent.tab1', {
            url: "/applications",
            templateUrl: "tab1.html",
            controller:'Tab1Ctrl',           
            resolve: {
              //Get some different data from an API
                 },
            })


        .state('parent.tab2', {
            url: "/phasing",
            templateUrl: "tab2.html",
            controller: 'Tab2Ctrl',
            resolve: {
               //More API Data
                }
            });

    });

Answer 1

我已经制作了plunker working here

$urlRouterProvider
    //.when('/main',
    .when('',
    function ($state) {

        $state.go('parent.tab1', { main_id: '00008' })
    });

此外，main.html发生了变化，不再使用 ng-controller 。我们只需要传递适当的控制器名称

$stateProvider
//Handle States Here 
.state('parent', {
  abstract: true,
  url: '/parent?main_id',
  templateUrl: "main.html",
  controller: 'MainController',
  resolve: {
    //Calls to API
  }
})
...
// MainController
// these two names should fit
app.controller("MainController", function($rootScope, $scope, $state) {

现在，它正在发挥作用，让我们讨论

我在我的网址中使用了一个参数
我解决了每个标签的状态更改的不同数据（删除它什么也没做）。
我没有使用ui-bootstrap作为标签，但是在按钮的ng-click上触发$ state.go。

快速回答：

参数存在，例如＃/父/ TAB1？main_id = 8000
解析每个控制器的trigerred。当我们导航到该状态（标签之间）
无需使用$ state.go，我用过：

一个片段：

<a ui-sref="parent.tab1({main_id:'00008'})"> go to tab1 with main_id '00008'</a><br />
<a ui-sref="parent.tab2({main_id:'00008'})"> go to tab2 with main_id '00008'</a><br />
<a ui-sref="parent.tab3({main_id:'00008'})"> go to tab3 with main_id '00008'</a><br />

检查here

防止父状态在子状态更改时重新加载

1 个答案: