javascript - $scope 对象到 URL？

Question

在我的 Angular 应用程序中，我希望用户能够为特定 URL 添加书签，该 URL 使用如下对象建模:

$scope.state = {
  selected : ["a", "b", "c"],
  yearOptions : [{ year: 1910, options : {color : "green"} } ]
}

a) 如何动态更新 URL 以反射(reflect) $scope.state？
b) 如何使用任何初始 URL 参数设置 $scope.state？

Answer 1

我已经编写了一个工作解决方案，我正在尝试开源该解决方案，该解决方案将 url 参数与范围变量同步。您所要求的操作很容易做到，并且在添加书签或共享 URL 时非常有用。

您需要做的就是在变量上设置 $watch 并使用 $location.search() 将范围变量设置为 url 参数。其次，在初始页面加载时，您需要使用 $location.search() 来获取 url 参数并将其设置为范围变量。这在 Controller 中工作应该不难，或者尝试编写一个服务以使其通用。

为了让 url 看起来更漂亮，我使用了一个简单的字典将作用域变量名称映射到 url 参数名称。

让您开始:

$scope.$watch('selected', function(newVal, oldVal) {
    if(newVal != oldVal) {
        $location.search('selected', newVal);
    }
});