Question

我正在尝试为根范围实现路由，例如

public class HasMany<T> : List<T> {
    public class HasMany() {
    }

    public class HasMany(List<T> items) {
        this.Clear();
        this.AddRange(items);
    }

    public void SetItems(List<T> items) {
        this.Clear();
        this.AddRange(items);
    }
}

猜猜你明白了。我使用的是AngularJS 1.4和UI Router 0.2.15。

我现在的问题是我有这条路线，它是我路线的最后一条路线：

/#/profile-1
/#/profile-2
/#/developer-name

在另一个视图中，我的搜索结果是，我将其用于网址：

(function () {
    'use strict';

    angular
        .module('bs3Prototype')
        .config(routerConfig);

    /** @ngInject */
    function routerConfig($stateProvider, $urlRouterProvider) {
        $stateProvider.
            state('home', {
                url: '/',
                templateUrl: 'app/main/main.html',
                controller: 'MainController',
                controllerAs: 'main'
            }).
            state('profiles', {
                url: '/profiles',
                templateUrl: 'app/profiles/profiles_listing.html',
                controller: 'ProfilesController',
                controllerAs: 'profiles'
            }).
            state('search', {
                url: '/search',
                templateUrl: 'app/search/search.html',
                controller: 'SearchController',
                //controllerAs: 'search',
                reloadOnSearch: false,
                resolve: {
                    profileCategories: function(profileCategoriesService) {
                        return profileCategoriesService.index();
                    },
                    jobCategories: function(staticListsService) {
                        return staticListsService.getList('jobTypes');
                    },
                    agendaCategories: function(agendaCategoriesService) {
                        return agendaCategoriesService.index();
                    },
                    buildingTypes: function(buildingTypesService) {
                        return buildingTypesService.index();
                    }
                }
            }).
            state('profile', {
                url: '/:profileSlug',
                templateUrl: 'app/profile/profile_view.html',
                controller: 'ProfileController',
                controllerAs: 'profile',
                resolve: {
                    profile: function (profilesSerivce, $stateParams) {
                        console.log(profilesSerivce.getProfile($stateParams.profileSlug));
                        return profilesSerivce.getProfile($stateParams.profileSlug);
                    }
                }
            });

        $urlRouterProvider.otherwise('/');
    }

})();

这将正确生成我的slug路线，但是当我点击它时没有任何反应，我不明白为什么。显然，它能够将对象解析为URL，但反之亦然。

第二次尝试：

我已经阅读this page并试了一下，但也没有成功。至少URL没有改变，slug URL仍然存在，但控制器仍未实例化......

<a ui-sref="profile({profileSlug: result.slug})">Profile: {{result.profile_title.profile_title_default}} (ID: {{result.id}})</a>

console.log（）调用的输出是：

$urlMatcherFactoryProvider.type('profileSlug', {}, function(profilesService) {
    var services = {
        profile: profilesService
    };
    var checkedUrls = [];
    return {
        encode: function(item) {
            console.log('encode');
            console.log(item);
            return item;
        },
        decode: function(item) {
            console.log('decode');
            console.log(item);
            if (_.contains(checkedUrls, item)) {
                return true;
            }
            return services.profile.getProfile(item).then(function(result) {
                console.log(result);
                checkedUrls.push(item);
                return true;
            });
        },
        is: function (item) {
            console.log('is');
            console.log(item);
            return true;
        }
    }
});

我真的不明白为什么不也在调用index.route.js:36 is index.route.js:37 architekturhalle index.route.js:36 is index.route.js:37 architekturhalle index.route.js:36 is index.route.js:37 architekturhalle index.route.js:19 encode index.route.js:20 architekturhalle index.route.js:36 is index.route.js:37 architekturhalle。

我只是改变了我的个人资料路线：

decode

Answer 1

遇到这种情况多次，我用来排除故障的方式是：

你有另一条同名的路线吗？
模板是否存在？
控制器是否存在？
getProfile会返回一个承诺吗？如果是这样，它会失败吗？

我希望这会有所帮助

Answer 2

var myApp =angular.module("appModuleName",['ui.router']);

var urlinfo = "/index.html";

myApp.config(function($stateProvider, $urlRouterProvider){
$stateProvider.state('dashboard', {
            url: '/settings',
            templateUrl: 'templates/settings.html'
        })
        .state('customer', {
            url: '/profile',
            templateUrl: 'templates/profile.html',
            controller :'customerDetailsController'
        })
        .state('admin', {
            url: '/account',
            templateUrl: 'templates/account.html',
            controller :'adminDetailsController'
        });

    $urlRouterProvider.otherwise('/settings');
});


myApp.controller("customerDetailsController",function($scope){
	
	$rootScope.customerDetails = {name:'Venkat',occupation:'software'};
});

myApp.controller("adminDetailsController",function($scope){
	
	var adminDetailsList = [{name:'Venkat',occupation:'admin'},
	                        {name:'nishita',occupation:'acccount'},
	                        {name:'laxmi',occupation:'finance'}];
	$scope.adminDetails = adminDetailsList;
});

/*!
 * Start Bootstrap - Simple Sidebar (http://startbootstrap.com/)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */

 body {
    overflow-x: hidden;
 }

/* Toggle Styles */

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
    padding-left: 250px;
}

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
    width: 250px;
}

#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -250px;
}

/* Sidebar Styles */

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #999999;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}

@media(min-width:768px) {
    #wrapper {
        padding-left: 250px;
    }

    #wrapper.toggled {
        padding-left: 0;
    }

    #sidebar-wrapper {
        width: 250px;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 0;
    }

    #page-content-wrapper {
        padding: 20px;
        position: relative;
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
    }
}

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Welcome Angular Js</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/simple-sidebar.css" rel="stylesheet">
<style>
table, th , td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>

</head>
<body ng-app="appModuleName">


<div id="wrapper">

        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand">
                    <a href="#">
                        Start Bootstrap
                    </a>
                </li>
                <li>
                    <a ui-sref="dashboard">Dashboard</a>
                </li>
                <li>
                    <a ui-sref="customer">customer</a>
                </li>
                <li>
                    <a ui-sref="admin">admin</a>
                </li>
                
            </ul>
        </div>
        <!-- /#sidebar-wrapper -->

        <!-- Page Content -->
        <div id="page-content-wrapper">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                       <ui-view></ui-view>
                       </div>
                </div>
            </div>
        </div>
        <!-- /#page-content-wrapper -->

    </div>
    
</body>


</html>

AngularJS UI路由器根范围slug路由

第二次尝试：

2 个答案: