Question

我正在使用 uiBreadcrumbs 和 $ stateProvider 在我的单页应用程序的三种状态之间移动。

让我们说这些状态是

首页 - ＆GT; FLOORS-＆GT; FLOOR

我能够在这些状态之间移动。但是当在 HOME 视图中点击某个元素时，我移动到 FLOOR 视图，FLOOR视图正确，现在当我再次回到HOME视图并执行相同的单击时再次到FLOOR视图，那么这次它无法加载局部。在FLOOR视图控制器中，我有以下代码：

document.getElementById("singleFloor");

这个＆＃34; singleFloor＆＃34;元素位于FLOOR视图模板的HTML中。

首先从HOME-＆gt; FLOOR移动它可以在加载的部分找到元素，但在第二次它作为null。我的状态配置代码如下：

var dashboard = angular.module('dashboardApp', [
    'ui.router',
    'ngResource',
    'ngAnimate',
    'angularUtils.directives.uiBreadcrumbs'
]);

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

    $urlRouterProvider.otherwise("/");

     $stateProvider
    .state('home', {
      url: "/",
      views: {
        'content@': {
          templateUrl: 'partials/map.html',
          controller: 'MapController',
        }
      },
      data: {
          displayName: 'USA'
      }
    })
    .state('home.floors', {
    url: "/locations/:loc_guid/floors",
        views: {
            'content@': {
                templateUrl: 'partials/factoryLayout.html',
                controller: 'factoryController',
            }
        },
        data: {
            displayName: '{{location_name}}'
        },
        resolve: {
            location_name: function($state, $stateParams) {
              return $state.params.loc_name;
            }
          }
    })  
    .state('home.floors.floor', {
    url: "/:floor_guid",
        views: {
            'content@': {
                templateUrl: 'partials/floorLayout.html',
                controller: 'floorController',
            }
        },
        data: {
            displayName: '{{floor_name}}'
        },
        resolve: {
            floor_name: function($state, $stateParams) {
              return $state.params.floor_name;
            }
          }
    })  
}]);

总而言之，在第一次从HOME-＆gt; FLOOR移动时，代码可以找到该元素，但在第二次同一次移动时它会变为null。

以下是我用于从状态HOME移动到FLOOR的代码，此代码在HOME视图中调用onClick某些元素。

$state.params.floor_name = splitted_url[splitted_url.length - 3];
$state.params.loc_name = $scope.locationData.locName;
//  $state.params.loc_guid = $scope.locationData.locGUID;
// $state.params.floor_guid = splitted_url[splitted_url.length - 3];

$state.go('home.floors.floor', {
    loc_guid: $scope.locationData.locGUID,
    floor_guid: splitted_url[splitted_url.length - 3]
});

我尝试过使用$ templateCache但是没有取得任何成功，我在开发者选项的网络标签中看到了模板＆＃39; partials / floorLayout.html＆＃39;仍然存在但不确定为什么第二次它没有加载到DOM中。

Answer 1

控制器在模板之前加载，以便同步它，你可以创建一个在模板之后写入的指令，确保它在模板之后加载并在指令的控制器中写入你的document.getElementById（）代码..... < / p>

在ui-breadrumb状态之间移动时模板加载失败

1 个答案: