AngulaJS ui-router: routing to url state

Question

Я пытаюсь написать очень маленькое приложение, что все, что он делает, получает данные из внешней службы, внешняя служба принимает путь и возвращает файлы и каталоги в этом пути, подумайте об этом как о файловом браузере. Все работает нормально при использовании ngRoute, но я пытаюсь преобразовать его в ui.router, так как мне нужно обновить несколько разделов страницы. Проблема связана с тем, что мои пути, похоже, не работают, поскольку я всегда перенаправлен на состояние base, я предполагаю, что из-за $urlRouterProvider.otherwise('/');

Я чрезвычайно новичок в javascript и AngularJS, и я провел довольно через несколько дней пытаются найти решение этой проблемы без особого везения, все документы я вижу всегда использовать статический URL как /demo/{id}/{info}, где мой URL является динамическим /repos/{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; 
    } 
    }); 

и t он частичный вид для таблицы списка файлов/каталогов

<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-адресов. Однако я понимаю, что вы указали «перенаправленные».

Второе наблюдение: ваша функция «в противном случае» выполняется до вашей государственной маршрутизации. Это может означать, что в противном случае вам будет дано соответствие до вашей государственной маршрутизации, что приведет к той же проблеме. Я мог ошибаться.