Question

我有一个单页应用程序＆＃39;（后端在Python / Django中）＆＃39;我的函数返回json响应，json响应由前端的角度js处理。我正在使用angular ajax调用来击中函数。现在我们都知道在地址栏中的ajax调用url不会被更改。但在角度js中，我们可以使用$location.path()设置网址。因此它保留了我访问过的URL的历史记录，并在浏览器后退按钮上将地址栏中的URL更改为上一个。但它不会改变页面的内容。

我的角度ajax电话：

 app.controller('myController',
    function($scope,$http, $location, $route, $timeout){

        $scope.formData={}

        $scope.getAllBrainframes=function(id){
            if(id){
                $scope.url = '/get-brainframe/'+id+'/'; 
            }else{
               $scope.url = '/get-brainframe/';
            }

            $http.post($scope.url)
                .success(function(data,status){
                   .success(function(data,status){
                   $scope.title = data[0].title
                   $scope.brainframes = data;
                   $location.path($scope.url);
                   $scope.parent= data[0].id;
                })
                .error(function(data,status){
                });

        }
});

当我在ajax成功时设置$location.path()时，它会将当前访问的URL附加到地址栏中并保留我访问过的每个URL的历史记录。但是，当我点击浏览器后退按钮时，它会将地址栏中的URL更改为上一个但不是内容。

现在有什么功能可以在我点击浏览器后退按钮或我如何更改页面内容时触发？

编辑： 以上ajax成功功能编辑。

我的HTML

<div class="content">
        <span ng-repeat="brainframe in brainframes">
            <p ng-if = "brainframe.brainframes.length > 0 ">
                <ul class="list-group col-md-5">
                    <div data-ng-repeat="brain in brainframe.brainframes" class="child-brainframes">
                        <a class="my-title" ng-click="getAllBrainframes(brain.brainframe_child.pk)">
                         <li class="list-group-item"><span class="badge">{$ brain.count_children $}</span>{$ brain.brainframe_child.title $}</li>
                        </a>
                      </div>
                </ul>
            </p>
            <p ng-if = "brainframe.brainframes.length < 1 ">
                 <span>No brainframes are available.</span>
            </p>
        </span>
    </div>

Answer 1

您需要查看$routeParams并更改模板中的内容。

<强> DEMO

.controller("MainCtrl",
   function($scope,$http, $location, $route, $timeout, $routeParams){

   $scope.formData={};

  $scope.id = $routeParams.id;

        $scope.getAllBrainframes=function(id){
            if(id){
                $scope.url = '/home/'+id+'/'; 
            }else{
               $scope.url = '/home';
            }
          console.log($scope.url);
            $location.path($scope.url);
        };

});

在你的模板中：

检查$scope属性并显示/隐藏

 <script type="text/ng-template" id="Home.html">
   <p>This is one template</p>

   <p ng-if="id">This is in next template</p>

   <a ng-click="getAllBrainframes('1')">next template</a>
 </script>

Check full code here

更新：

如果要在路由之间保留ajax调用数据，则需要将其存储在服务中，并根据服务中的$routeParams在控制器中访问它。

Angularjs中$ location的问题

1 个答案: