AngularJs Location.path在没有页面刷新的情况下无法获取当前路径
我是Angular的新手,我正在用它建立一个贷款申请。我试图做的是为用户设置一种方式,让他们进入应用程序的下一页和上一页。如果我刷新页面,我的设置就会起作用,否则它将不会拉取当前路径。这是我的AngularJs Location.path在没有页面刷新的情况下无法获取当前路径,angularjs,Angularjs,我是Angular的新手,我正在用它建立一个贷款申请。我试图做的是为用户设置一种方式,让他们进入应用程序的下一页和上一页。如果我刷新页面,我的设置就会起作用,否则它将不会拉取当前路径。这是我的 var app = angular.module('app', ['ngRoute']); /*Controller for navigation*/ app.controller('NavCtrl', function ($scope, $route, $location, $http
var app = angular.module('app', ['ngRoute']);
/*Controller for navigation*/
app.controller('NavCtrl', function ($scope, $route, $location, $http, $routeParams) {
var str = $location.path();
$scope.currentPage = str.replace("/", "");
/*Get nav.json with navigation data*/
$http.get('/configs/nav.json').success(function(data) {
$scope.step = data;
});
/*Set active status for nav buttons*/
$scope.isActive = function (viewLocation) {
var active = (viewLocation === $location.path());
return active;
}
});
模板
<div class="forms">
<div class="wrapper">
<div ng-view></div>
<div ng-controller="NavCtrl">
<div ng-repeat="steps in step" ng-show="steps.url=='{{currentPage}}'">
<div ng-show="'{{step[$index+1].url}}'!=''" class="next">
<a href="#/{{step[$index+1].url}}">Next ❱</a>
</div>
<div ng-show="'{{step[$index-1].url}}'!=''" class="previous">
<a href="#/{{step[$index-1].url}}">❰ Back</a>
</div>
</div>
</div>
</div>
</div>
您可以忽略控制器中用于顶部导航的isActive
编辑:还尝试了此处找到的解决方案
我认为这是因为您的
NavCtrl
只创建了一次,因此您的代码设置$scope.currentPage
只运行一次
您可以侦听控制器中的事件,以检测当前路径的更改
$scope.$on('$locationChangeSuccess', function() {
$scope.currentPage = $location.path().substr(1);
});
我还能在哪里创建它呢?这似乎复制了这个问题。我把它放在控制器里了,对吗?嗯,我就是这么做的。我也试过运行块,但没有成功。请参阅更新。我仍然有相同的问题。您还有其他建议吗?@andrewthread gill除了将模板逻辑更改为
ng show=“steps.url==currentPage”
,否
var app = angular.module('app', ['ngRoute']);
app.run(function ($rootScope, $location) {
$rootScope.$on('$locationChangeSuccess', function () {
$rootScope.currentPage = $location.path().substr(1);
});
});
$scope.$on('$locationChangeSuccess', function() {
$scope.currentPage = $location.path().substr(1);
});