angularjs - 使用 $routeProvider 时如何传递变量

Question

我正在使用 $routeProvider 创建一个单页应用程序，用户可以在其中按“继续”转到下一步。每当用户单击“继续”时，将变量传递到下一页非常重要，因此我遵循了一些建议并创建了自己的具有持久变量的服务。这一切都很好，除了我只能从服务获取变量，我不知道如何更新变量。这是我的代码:

myApp.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
            when('/pick_categories', {
                templateUrl: '/pick_categories.html',
                controller: 'MeetupDataCtrl'
            }).
            when('/pick_times', {
                templateUrl: '/pick_times.html',
                controller: 'MeetupDataCtrl'
            }).
            when('/events', {
                templateUrl: '/events.html',
                controller: 'MeetupDataCtrl'
            }).
            otherwise({
                redirectTo: '/pick_categories'
            });
    }]);

myApp.service("meetupService", function(){
    this.checked_categories = [];
});

myApp.controller('MeetupDataCtrl', ['$scope', '$http', '$location', '$resource', 'meetupService', function MeetupDataCtrl($scope, $http, $location, $resource, meetupService) {
    $scope.checked_categories = meetupService.checked_categories;
}]);

然后在 View 中我已将checked_categories绑定(bind)到输入字段。

我知道问题是我在 init 上获取服务的变量，但在更改路由后我没有从范围内更新服务的变量。关于我如何做到这一点有什么想法吗？ (或者是否有其他最佳实践)

Answer 1

事实上，您可以直接更改服务属性...:

meetupService.checked_categories.push({ something: 'something'});

...但最好封装服务的状态属性，以便您可以从 Controller 执行以下操作:

meetupService.addCategory('theCheckedCategory');

请注意服务在 Angular 中是单例的；您的 Angular 应用程序中将只有一个 meetupService。这意味着，一旦用户以某种方式修改了checked_categories数组，他们就会拥有该数组，直到他们刷新/重新加载您的网站为止。

另请注意，在构建单页面应用程序(Angular 是)时，大多数情况下不需要通过 url 参数传递状态信息。

听起来您正在尝试构建一个向导，如果我猜对的话您不需要上述任何内容。实际上，在 Angular 中制作向导非常容易，因为所有状态信息都会保留，...只要您愿意。

参见this plunker一个简单的向导示例。

编辑:

哦，如果您确实需要将参数传递给路由，您可以使用内置 $location service 来做到这一点.

// change the path
$location.path('/newValue')

// change the query string / url arguments
$location.search({myArg: 'value', myOtherArg: 'anotherValue'});