AngularJs没有连接通过

AngularJs not linking through

本文关键字：连接 AngularJs      更新时间：2023-09-26

我有一份员工名单。现在我想将每个记录链接到一个员工档案。但无论我做什么，它都不起作用。

这是我的代码：

<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。

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)
}

您的模板URL应该是

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);
}
相关文章：