Не обновляйте URL-адрес

У меня есть фрагмент кода, который отображает список имен файлов. Нажатие на каждое имя файла показывает его тело справа. И мы могли бы добавить файлы в список.Не обновляйте URL-адрес

После нажатия на каждое имя файла URL-адрес систематически обновляется в адресной строке браузера. Кто-нибудь знает, возможно ли обновлять строку url, но все равно выполнить мою просьбу (т. Е. Показать тело)?

JSBin

<html ng-app="flapperNews"> 
<head> 
    <script src="https://code.jquery.com/jquery.min.js"></script> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.js"></script> 
    <script> 
    var app = angular.module('flapperNews', ['ui.router']); 

    app.config(['$stateProvider', function ($stateProvider) { 
     $stateProvider 
      .state('file', { 
       url: '/file/{name}', 
       template: "{{file.body}}", 
       controller: 'FileCtrl' 
      }) 
    }]); 

    app.controller('MainCtrl', ['$scope', function ($scope) { 
     $scope.files = [{ name: "index.html", body: "the body of index.html" }, 
     { name: "index.js", body: "the body of index.js" }, 
     { name: "test.html", body: "the body of test.html" }] 

     $scope.addFile = function() { 
      $scope.files.push({ name: $scope.name, body: $scope.body }); 
      $scope.name = ""; 
      $scope.body = ""; 
     } 
    }]); 

    app.controller('FileCtrl', ['$scope', '$stateParams', function ($scope, $stateParams) { 
     $scope.file = $scope.files.find(function (file) { return file.name === $stateParams.name }); 
    }]); 
    </script> 
</head> 
<body ng-controller="MainCtrl"> 
    <div class="row"> 
     <div class="col-sm-6 col-md-6 col-xl-6 col-lg-6"> 
      <div ng-repeat="file in files track by $index"> 
       <a ui-sref="file({name: file.name})">{{file.name}}</a> 
      </div> 
      <br><br> 
      <form ng-submit="addFile()"> 
       <div class="form-group"> 
        <input type="text" placeholder="name" ng-model="name"></input> 
        <input type="text" placeholder="body" ng-model="body"></input> 
       </div> 
       <button type="submit" class="btn btn-primary">addFile</button> 
      </form> 
     </div> 
     <div class="col-sm-6 col-md-6 col-xl-6 col-lg-6"> 
      <ui-view></ui-view> 
     </div> 
    </div> 
</body> 
</html>

источник

2017-02-08 Anonymous

Да, вы можете сделать это. Вы использовали {name} в URL-адресе. Вот почему он меняет имя файла каждый раз. Передайте имя файла в качестве параметра в $ stateParams и удалите параметр имени из URL.

$stateProvider 
     .state('file', { 
      url: '/file', 
      template: "{{file.body}}", 
      controller: 'FileCtrl', 
      params: {name: null} 
     });

источник

2017-02-08 18:33:10 Shahzad

ответ

Смежные вопросы