【发布时间】：2016-04-10 09:50:55
【问题描述】：
我正在尝试为根范围实现路由，例如
/#/profile-1
/#/profile-2
/#/developer-name
猜你明白了。我正在使用 AngularJS 1.4 和 UI Router 0.2.15。
我现在的问题是我有这条路线，它是我路线顺序中的最后一条：
(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('/');
}
})();
在另一个视图中，我的搜索结果，我使用这个作为 URL：
<a ui-sref="profile({profileSlug: result.slug})">Profile: {{result.profile_title.profile_title_default}} (ID: {{result.id}})</a>
这将正确生成我的 slug 路线，但是当我点击它时，什么也没有发生，我不知道为什么。显然它能够将对象解析为 URL，但反之亦然。
第二次尝试：
我已阅读this page 并尝试过，但也没有成功。至少 URL 没有改变，slug URL 保持不变，但控制器仍然没有实例化......
$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;
}
}
});
console.log() 调用的输出是这样的：
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。
我只是将我的个人资料路线更改为：
state('profile', {
url: '/{profileSlug:profileSlug}',
templateUrl: 'app/profile/profile_view.html',
//controller: 'ProfileController',
controller: function() { alert('TEST'); },
//controllerAs: 'profile',
resolve: {
profile: function (profilesSerivce, $stateParams) {
console.log(profilesSerivce.getProfile($stateParams.profileSlug));
return profilesSerivce.getProfile($stateParams.profileSlug);
}
}
});
【问题讨论】：
-
如果你直接导航到 URL 会发生什么？
-
什么都没有，它加载布局而不是里面的视图，console.log() 没有被触发。
标签： javascript angularjs angular-ui-router slug