【发布时间】：2012-12-22 15:29:27
【问题描述】：
这是基本设置，它有一个默认的 noemployee.html 部分：作为 ng-view
Index.html 内容：
<div id="container" ng-controller="EmployeeCtrl">
<!-- Side Menu -->
<span id="smenuSpan">
<ul id="thumbList">
<li ng-repeat="employee in employees | filter:categories">
<a href="Employee/{{employee.id}}"><img class="smallImage" ng-src="content/app/images/{{employee.image}}" alt="{{employee.description}}"></a>
</li>
</ul>
</span>
<!-- Content -->
<span id="contentSpan">
<div ng-view></div>
</span>
</div>
我的路线提供者：
var EmployeeModule = angular.module('EmployeeModule', [], function($routeProvider, $locationProvider) {
$routeProvider.when('/', { templateUrl: 'content/app/partials/noemployee.html', controller: EmployeeModule.EmployeeCtrl });
$routeProvider.when('Employee/:id', { templateUrl: 'content/app/partials/employee.html', controller: EmployeeModule.EmployeeCtrl });
$routeProvider.otherwise({ redirectTo: '/' });
$locationProvider.html5Mode(true);
我的控制者：
function EmployeeCtrl($scope, $http, $routeParams, $timeout) {
$scope.employees = [
{ "id": 1, "category": "ones", "image": "person1.jpg", "description": "person 1 description", name:"Jane Smith" },
{ "id": 2, "category": "twos", "image": "person2.jpg", "description": "person 2 description", name: "Mark Sharp" },
{ "id": 3, "category": "threes", "image": "person3.jpg", "description": "person 3 description", name: "Kenny Suave" },
{ "id": 4, "category": "fours", "image": "person4.jpg", "description": "person 4 description", name: "Betty Charmer" },
{ "id": 5, "category": "fives", "image": "person5.jpg", "description": "person 5 description", name: "John Boss" }
];
$scope.employeesCategories = [];
$scope.currentEmployee = {};
$scope.params = $routeParams;
$scope.handleEmployeesLoaded = function (data, status) {
//$scope.images = data;
// Set the current image to the first image in images
$scope.currentEmployee = _.first($scope.employees);
// Create a unique array based on the category property in the images objects
$scope.employeeCategories = _.uniq(_.pluck($scope.employees, 'category'));
}
$scope.fetch = function () {
$http.get($scope.url).success($scope.handleEmployeesLoaded);
};
$scope.setCurrentEmployee = function (employee) {
$scope.currentEmployee = employee;
};
// Defer fetch for 1 second to give everything an opportunity layout
$timeout($scope.fetch, 1000);
}
观察：
目前，如果我点击任何员工，没有“员工/？？”被添加到地址栏路径[这对我来说不是犯罪]，但是，主要内容 div 不会将部分更改为 employee.html。
如果我注释掉“$locationProvider.html5Mode(true);”，默认 localhost 现在是“http://localhost:31219/#/”，当我点击任何员工时，地址栏会显示“http://localhost:31219/Employee/1”，并且页面被导航到 404 错误页面。
我知道我在这里混了一些东西，解决方案是如此简单以至于我无法理解。
目标：
- 我真的很想在地址栏中避免使用井号标签。
如果员工/ID 不显示在地址栏中，这很好，但没有要求，但我怀疑部分无法更改。而且，自然
我希望在单击员工时将部分更改为“employee.html”页面。
有人知道我的代码哪里出错了吗？
提前致谢！
【问题讨论】：
-
控制台说什么？
-
为了确定，您是否在 index.html（html 标签）中包含了 ng-app="EmployeeModule"？
-
如果可能，请设置plnkr。更容易检查thingq。
-
[叹气] 是的，我确实包含了 ''。我将回到种子计划，看看是否能找到解决方案。感谢您的帮助。
标签： javascript angularjs javascript-framework