如何将Angular的$scope数据加载到location.href中?

20 浏览
0 Comments

如何将Angular的$scope数据加载到location.href中?

我有以下内容:

    
        {{ data.name }}

在我的angular文件中,我有以下内容:

 var mainApp= angular.module('mainApp',[]);
 mainApp.controller('formCTR',['$scope','$http',function($scope,$http){
   $http.post('/here',{ data: 'something' }).success(
       function(data){
          $scope.datas=data;
       }
   )
  }]);

当我单击时,URL显示为:

http://localhost:3000/url/{{ data.name }}

我如何在onClick中显示数据的名称,以便显示为:

http://localhost:3000/url/right_name

谢谢

0
0 Comments

问题的出现原因是ng-click无法识别location,因为它不在控制器范围内,它是一个全局变量。解决方法是使用ng-click代替onClick,并将$location服务暴露给$scope对象。另一种解决方法是使用锚点标签和ng-href来加载$scope数据到location.href。以下是解决方法的具体代码:

控制器部分:

...
$scope.redirect = function(route) {
   $location.path('/' + route);
}
...

模板部分:

{{ data.name }}

或者使用锚点标签和ng-href:


感谢,第二种方法有效!希望第一种方法也能生效,这样我就不用为a标签编写另外的CSS样式了。

不,除非将$location服务暴露给$scope对象,否则第一种方法不会生效。你只能访问添加(暴露)在$scope对象上的属性。通常这不是一个好的做法。请参考下面的回答获取详细信息。

在查看你的代码后,你不需要在ng-href的双引号内使用单引号。

0
0 Comments

在Angular中,如果想要进行页面重定向,可以使用两种方法,一种是使用'ng-click'指令和点击处理器,另一种是使用'ng-href'指令和URL。

第一种方法是在HTML中使用'ng-click'指令,如下所示:

{{ data.name }}

然后在控制器的$scope中添加'redirect'函数:

$scope.redirect = function (route) {
  $location.path('/' + route);
}

这种方法允许您通过更改参数来将同一个函数用于重定向到多个路由。

第二种方法是使用'ng-href'指令,这是一种简单而优雅的方法,适用于只需要进行重定向的情况:


这样,当用户点击链接时,页面将自动重定向到指定的URL。

以上就是在Angular中如何将$scope数据加载到location.href的方法。

0