AngulaJS ui-router：路由到url狀態

Question

我正在嘗試編寫一個非常小的應用程序，它所做的全部工作均從外部服務獲取數據，外部服務接受路徑並返回該路徑中的文件和目錄，將其視為文件瀏覽器。 使用ngRoute時，一切工作正常，但是由於我必須更新頁面的多個部分，因此我嘗試轉換為ui.router 。 問題來自這樣一個事實：我認為由於$urlRouterProvider.otherwise('/');我總是被重定向到base狀態，所以我的路徑似乎不起作用$urlRouterProvider.otherwise('/');

我是javascript和AngularJS的新手，我花了很多天的時間來尋找解決此問題的方法，但運氣不佳，我看到的所有文檔始終使用靜態網址，例如/demo/{id}/{info} ，其中我的網址是動態/repos/{path} ，其中path是實際路徑，例如/tmp/test/test1/test2

這是當前代碼

var app = angular.module("atlas", ['ui.router', 'repoControllers']);

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

    $urlRouterProvider.otherwise('/');

    $stateProvider
    .state('base', {
        url: '/',
        views: {
          '': { templateUrl: 'partials/repo-list.html' },
          'repoinfo': { templateUrl: 'partials/repo-info.html' },
          'repoownership': { templateUrl: 'partials/group-ownership.html' },
          'repotype': { templateUrl: 'partials/repo-type.html' },
          'repopath': { templateUrl: 'partials/repo-path.html' },
          'userinfo': { templateUrl: 'partials/user-info.html' }
        },
        controller: 'RepoController'
      })
    .state('base.repos', {
        url: '/repos/*path',
        parent: 'base',
        views: {
          '': { templateUrl: 'partials/repo-list.html' },
          'repoinfo': { templateUrl: 'partials/repo-info.html' },
          'repoownership': { templateUrl: 'partials/group-ownership.html' },
          'repotype': { templateUrl: 'partials/repo-type.html' },
          'repopath': { templateUrl: 'partials/repo-path.html' },
          'userinfo': { templateUrl: 'partials/user-info.html' }
        },
        controller: 'RepoListCtrl'
      })
  }]);

app.factory('atlasRepository', function($http) {
    return {
      getIndex: function(path) {
        console.log("FACTORY: getIndex " + path);
        var sanitized = "";
        if (typeof path === 'undefined') {
          sanitized = '/';
        } else {
          sanitized = "/" + path.replace(/\/+/g, '/');
        };

        var url = "http://localhost:8080" + sanitized;
        console.log(url);
        return $http.get(url);
      }
    };
  });

app.controller("RepoController", function($scope, $stateParams, atlasRepository) {
    $scope.repos = atlasRepository.getIndex($stateParams.path).success(function(repos) {
        $scope.repos = repos;
        console.log("RepoController");
      });

  });


var repoControllers = angular.module('repoControllers', []);

repoControllers.controller("RepoListCtrl", function($scope, $stateParams, atlasRepository) {
    $scope.repos = atlasRepository.getIndex($stateParams.path).success(function(repos) {
        $scope.repos = repos;
        console.log($stateParams);
        console.log($scope);
      });

  });
app.filter('bytes', function() {
    return function(bytes, precision) {
      if (isNaN(parseFloat(bytes)) || !isFinite(bytes)) return '-';
      if (typeof precision === 'undefined') precision = 1;
      var units = ['bytes', 'kB', 'MB', 'GB', 'TB', 'PB'],
      number = Math.floor(Math.log(bytes) / Math.log(1024));
      return (bytes / Math.pow(1024, Math.floor(number))).toFixed(precision) +  ' ' + units[number];
    }
  });

app.filter('path', function() {
    return function(path) {
      path = path.replace(/^\//, '');
      return path;
    }
  });

以及列出文件/目錄的表的部分視圖

 <table>
    <tr>
      <th>File Name</th>
      <th>Size</th>
      <th>Modified Date</th>
      <th>User</th>
      <th>Action</th>
    </tr>
    <tr ng-repeat="directory in repos.directories">
      <td><a href="#/repos/{{repos.path| path}}{{directory.name}}/"><i class="fa fa-folder"></i> {{directory.name}}</a></td>
      <td>-</td>
      <td> {{directory.updatedat | date:"medium"}}</td>
      <td>unknown</td>
      <td><i class="fa fa-trash"></i></td>
    </tr>

    <tr ng-repeat="file in repos.files">
      <td><i class="fa fa-file"></i> {{file.name}}</td>
      <td> {{file.size | bytes}}</td>
      <td> {{file.updatedat| date:"medium"}}</td>
      <td>unknown</td>
      <td><i class="fa fa-trash"></i></td>
    </tr>
  </table>

我嘗試在模板中使用ui-sref ，但所有文檔再次指向相當簡單的用例<a ui-sref="contacts.detail({ id: contact.id })">{{ contact.name }}</a>在我的情況下不起作用，因為我需要傳遞當前路徑以及要更改為的目錄名，我嘗試了<a ui-sref="contacts.detail({ id: repos.path + directory.name })">{{ directory.name }}</a>沒有運氣，特別是因為需要過濾repos.path

Answer 1

問題可能出在您的狀態定義上。 根據docs ，通配符應指定為：

    .state('base.repos', {
        url: '/repos/{path:.*}',
        parent: 'base',
        views: {
          '': { templateUrl: 'partials/repo-list.html' },
          'repoinfo': { templateUrl: 'partials/repo-info.html' },
          'repoownership': { templateUrl: 'partials/group-ownership.html' },
          'repotype': { templateUrl: 'partials/repo-type.html' },
          'repopath': { templateUrl: 'partials/repo-path.html' },
          'userinfo': { templateUrl: 'partials/user-info.html' }
        },
        controller: 'RepoListCtrl'
      })

Answer 2

第一次觀察：兩個默認（''）狀態視圖都指定相同的templateUrl。 這意味着您將為兩個URL顯示相同的模板。 我知道，但是您指定了“重定向”。

第二個觀察：您的“否則”功能在狀態路由之前運行。 這可能意味着在狀態路由之前，您的其他對象將被匹配，這將導致相同的問題。 我對此可能是錯的。