Question

我是使用ui-router的新手，并且在使用延迟加载的嵌套ui-view时遇到了一些困难。我已经尝试了很多东西，虽然我想我已经接近了，但是我无法让它发挥作用，所以无论谁修复下面分享的那个，都会得到正确答案。

- 首先，require.js引导主应用程序，index.html包含两个ui视图，一个用于导航，一个用于主要内容部分。主要内容部分包含各种项目组合项（plnkr中的Test1），当选择一个时，它们将延迟加载（使用ocLazyLoad）到主内容部分。

- 主应用程序模块在其配置方法中定义各种状态，包括根据其ID并基于命名约定加载项目组合项目的状态。

- 单击Test1时，其主模块是延迟加载的，并且该模块定义了自己的状态，Test1有自己的index.html，它有自己的嵌套ui-view。值得注意的是，我还必须使用这个模块的run方法来运行一个在$ timeout中包装$ state.go的函数，以便在Test1为时将模板内容显示在嵌套的ui-view中最初点击。这很黑，无疑不是正确的方法，也许不是问题的根源，正如我们很快就会看到的那样。我也尝试将$ state.go放在一个服务中，但它没有起作用，因为我最终遇到了同样的问题。

- 最后，在这里，事情就会破裂。如果从Test1内部，您单击主导航中的Home，然后再次尝试单击Test1，之前出现在嵌套ui视图中的模板内容不会出现（显然，因为模块运行功能只运行一次）。通过手动点击重新加载状态的链接可以很容易地重新显示它，但显然这并不可取。

TL / DR - 主页 - ＆gt;点击Test1 - ＆gt;工作！ - ＆GT;点击主页 - ＆gt;单击Test1 - ＆gt;符！

主要应用模块和状态：

(function() {

  angular.module('myApp', [
  'ui.router',
  //'door3.css',
  'oc.lazyLoad'
])
.config(function($ocLazyLoadProvider, $stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/');

  $stateProvider
    .state('root', {
      url: '/',
      views: {
        'nav': {
          templateUrl: 'views/static/nav.html'
        },
        'content': {
          templateUrl: 'views/portfolio.html'
        }
      }
    })
    .state('root.home', {
      url: 'home',
      views: {
        'content@': {
          templateUrl: 'views/portfolio.html'
        }
      }
    })
    .state('root.about', {
      url: 'about',
      views: {
        'content@': {
          templateUrl: 'views/about.html'
        }
      }
    })
    .state('root.portfolio', {
      url: ':id',
      views: {
        'content@': {
          // css: function($stateParams) {
          //   return '/portfolio/' + $stateParams.id + '/css/master.css';
          // },
          templateUrl: function($stateParams) {
            return 'portfolio/' + $stateParams.id + '/index.html';
          },
          resolve: {
            load: function($stateParams, $ocLazyLoad) {
              return $ocLazyLoad.load({
                files: ['portfolio/' + $stateParams.id + '/js/mainModule.js']
              });
            }
          }
        }
      }
    });

});

})();

延迟加载Test1主模块并声明：

(function() {

  angular.module('testingApp', [{
  files: [
    'portfolio/testing/controllers/testingCtrl.js'
  ]
}])
.config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/');

  $stateProvider
    .state('root.portfolio.testing', {
      url: '/',
      views: {
        'testingContent@root.portfolio': {
          templateUrl: 'portfolio/testing/views/testfile.html',
          controller: 'testingCtrl',
          controllerAs: 'test'
        }
      }
    })
})
.run(function($state, $timeout) {
  $timeout(function() {
    $state.go('root.portfolio.testing');
  }, 0);
});

})();

Answer 1

我不确定您要实现的目标，但将$state.go放入run块是第一次和其他任何连续时间工作的原因。

原因是run块仅在模块加载和模块加载一次时运行一次。

要将$state.go此移动testingCtrl调整为$state，同时将var mainApp=angular.module('app',['ngMaterial','facebook','services']); mainApp.config(function(FacebookProvider) { // Set your appId through the setAppId method or // use the shortcut in the initialize method directly. FacebookProvider.init('532389480270701'); }) mainApp.controller('StartUpController', ['$http','Facebook','$scope','Product', function($http,Facebook,$scope,Product){ $scope.user={}; $scope.mate={}; $scope.facebookReady=false; $scope.login = function() { // From now on you can use the Facebook service just as Facebook api says Facebook.login(function(response) { // Do something with response. }); }; $scope.getLoginStatus = function() { Facebook.getLoginStatus(function(response) { if(response.status === 'connected') { $scope.loggedIn = true; } else { $scope.loggedIn = false; } }); }; $scope.me = function() { Facebook.api('/me', function(response) { $scope.user = response; }); }; $scope.getMateInfo=function(){ Facebook.api( '/me/picture', 'GET', {}, function(response) { $scope.mate=response; } ); }; $scope.$watch(function() { // This is for convenience, to notify if Facebook is loaded and ready to go. return Facebook.isReady(); }, function(newVal) { // You might want to use this to disable/show/hide buttons and else $scope.facebookReady = true; });添加为依赖注入

查看我的固定plunker。

Angular UI-Router - 在状态更改

1 个答案: