Question

我的应用使用Angularjs-ui-router在不同的模块之间切换。我有来自父状态的2个子状态。我需要加载＆＃39; home.search＆＃39;默认状态和＆＃39; home.fileupload＆＃39;按钮点击，但目前＆＃39; home.fileupload＆＃39; state加载tabs.html。

是否存在页面输入加载默认状态为＆＃39; home.search＆＃39;状态和按钮点击加载＆＃39; home.fileupload＆＃39;从父抽象状态（home.html）???

routes.js

  .state('home', {
          abstract: true, 
          templateUrl: 'scripts/home.html'
   })

  .state('home.search', {
       url: '/summary',
       views: {               
          'search': 
          {
                    templateUrl: "scripts/home/search.html"
          },
          'summary': 
          {
                    templateUrl: "scripts/home/summary.html"
          }
      }
   })
  .state('home.fileupload', {
      url: '/fileupload',
      views: {               
       'upload': 
          {
                    templateUrl: "scripts/home/upload.html"
          }
       }
  })

home.html

 <button type="button" ng-click="goToState('home.search')">Search</button>
 <button type="button" ng-click="goToState('home.fileupload')">fileUpload</button>
 <div ng-include="'scripts/home/tabs.html'"></div>

tabs.html

 <div ng-controller="MainCtrl">    
  <div ui-view="summary"></div>   
  <div ui-view="search"></div>
 </div>

Answer 1

有一个工作example的链接。我做了一些改动，使其更像ui-router。

首先，我们必须将控制器定义从<div ng-controller="MainCtrl">移动到状态定义：

$stateProvider
  .state('home', {
    abstract: true,
    templateUrl: 'scripts/home.html',
    controller: 'MainCtrl', // here we put together template and controller
  })

.state('home.search', {
  url: '/summary',
  views: {
    'search': {
      templateUrl: "scripts/home/search.html",
      controller: 'SearchCtrl', // here as well
    },
    'summary': {
      templateUrl: "scripts/home/summary.html",
      controller: 'SummaryCtrl', // here also
    }
  }
})
...

另外，抽象状态home的模板的一部分应该是<div ui-view="upload"></div>，作为文件上传状态的占位符。

这是启动：

.config(['$urlRouterProvider',
    function($urlRouterProvider) {

      $urlRouterProvider.otherwise('/summary');
    }
 ]);

检查plunker

中的所有内容

Answer 2

您可以使用module.run（）方法设置默认路由。你就是这样做的：

testModule = angular.module('ModuleName', []);
testModule.run(['$rootScope', '$state', function($rootScope, $state) {
$state.go('statename');
}]);

应用启动时执行运行块。如果您有任何疑惑，请阅读有关运行块的信息：https://docs.angularjs.org/guide/module

Angular-ui-router：从父抽象状态加载一个子状态作为默认值

2 个答案: