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;
}]);

然后在视图中，我将checked_categories绑定到输入字段。

我知道问题是我在init上获取服务的变量，但是在更改路由后我没有从范围更新服务的变量。有关如何做到这一点的任何想法？（或者如果还有其他最佳实践）

Answer 1

您实际上可以直接更改服务属性......：

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

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

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'});

使用$ routeProvider时如何传递变量

1 个答案: