Question

我是Angular的新手，我正在建立一个贷款申请。我想要做的是为用户设置一种方法来转到应用程序的下一页和上一页。如果我刷新页面，我的设置有效，否则它不会拉出当前路径。这就是我所拥有的。

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 &#10097;</a>
                </div>
                <div ng-show="'{{step[$index-1].url}}'!=''" class="previous">
                    <a href="#/{{step[$index-1].url}}">&#10096; Back</a>
                </div>
            </div>
        </div>
    </div>
</div>

的Json

[
{"number": "1",
 "title": "Loan Information",
 "url": "loan"
},
{"number": "2",
 "title": "Personal Information",
 "url": "personal"
},
{"number": "3",
 "title": "Income Information",
 "url": "income"
},
{"number": "4",
 "title": "Debt Information",
 "url": "debt"
},
{"number": "5",
 "title": "Reference",
 "url": "reference"
},
{"number": "6",
 "title": "Document & Submit",
 "url": "submit"
}
]

您可以忽略控制器中用于顶部导航的isActive。

编辑：还尝试了Can AngularJS listen for $locationChangeSuccess on refresh?

中找到的解决方案

var app = angular.module('app', ['ngRoute']);

    app.run(function ($rootScope, $location) {
        $rootScope.$on('$locationChangeSuccess', function () {
            $rootScope.currentPage = $location.path().substr(1);
        });
    });

Answer 1

我之所以这样说是因为您的NavCtrl只创建了一次，因此您的代码设置$scope.currentPage只会运行一次。

您可以收听控制器中的$locationChangeSuccess事件，以检测当前路径的更改

$scope.$on('$locationChangeSuccess', function() {
    $scope.currentPage = $location.path().substr(1);
});

AngularJs Location.path在没有页面刷新的情况下不会获得当前路径

1 个答案: