AngularJs没有链接通过

时间:2016-03-24 10:40:22

标签: javascript angularjs routing angularjs-routing

我有一份员工名单。现在我想将每条记录链接到一个员工档案。但无论我做什么,它都无法正常工作。

这是我的代码:

<tr ng-repeat="employee in homeCtrl.employees" ng-href="#/werknemer/{{employee.EmployeeId}}">
    <td>{{  employee.Role }}</td>
    <td>{{  employee.Company }}</td>
    <td>{{  employee.FirstName }}</td>
    <td>{{  employee.LastName }}</td>
</tr>

我的网页来源如下:

<tr ng-repeat="employee in homeCtrl.employees" ng-href="#/werknemer/1" class="ng-scope" href="#/werknemer/1">

路由文件:

.when('/werknemer/{id}', {
        templateUrl: '../views/employee.html',
        controller: 'employeeController',
        controllerAs: 'employeeCtrl'
    })

我正在使用Angular 1.5.2。

2 个答案:

答案 0 :(得分:2)

href属性仅适用于a(锚)标记。你在tr尝试它,这显然不会起作用。

您需要通过调用ng-click

上的事件来进行手动重定向

<强>标记

<tr ng-repeat="employee in homeCtrl.employees" ng-click="doRedirect(employee.EmployeeId)">
    <td>{{  employee.Role }}</td>
    <td>{{  employee.Company }}</td>
    <td>{{  employee.FirstName }}</td>
    <td>{{  employee.LastName }}</td>
</tr>

同时改变你在路线中引入url参数的方式。

<强>代码

.when('/werknemer/:id', { //changed `/{id}` to `/:id`
    templateUrl: '../views/employee.html',
    controller: 'employeeController',
    controllerAs: 'employeeCtrl'
})

<强>控制器

//ideally this method can be easily moved out to service, will act as a redirection logic
$scope.doRedirect = function(id){
   $location.path('#/werknemer/'+id)
}

答案 1 :(得分:2)

你的templateUrl应该是

templateUrl: '/views/employee.html',

angular总是查看项目根目录,因此您不需要遍历一个级别。

除此之外。不建议使用href,你应该使用ng-click指向一些重定向功能。

例如。

<anyElement ng-click='goTo("#/werknemer/1")'></anyElement>

...

$scope.goTo = function(route){

    //depending on wether the route param contains the leading "#" you might want to use either of the following.

    $window.location.assign(route);

    OR

    $location.path(route);
}