Question

以下是我的意思的示例实现： http://plnkr.co/edit/iwQPZfbDyKYwSzjjAPTN?p=preview

单向绑定：

鉴于你有plunkr加载预览
当您更改仅包含＆＃34; fooDefault＆＃34;
然后，您可以在网址中看到查询参数，并在范围内更新值

还有另一种方式：

鉴于你有plunkr加载预览
当您更改包含＆＃34的顶部输入中的文字时，＃/ a？foo = fooDefault＆＃34;
然后，您可以在网址中看到查询参数和范围内的值一次更新

最相关的代码部分（StackOverflow要求我包含一个）：

.factory('syncUrlWithScope', function ($location) {
  return function ($scope, defaultValues) {
    $scope.$watch(function () {
      return $location.search()
    }, function (newVal) {
      console.log(JSON.stringify(defaultValues), 'from url to scope', newVal)
      $scope.queryParams = newVal
    }, true)

    $scope.$watch('queryParams', function (newVal) {
      console.log(JSON.stringify(defaultValues), 'from scope to url', newVal, defaultValues)
      for (var key in defaultValues) if (defaultValues.hasOwnProperty(key)) {
        $scope.queryParams[key] = $scope.queryParams[key] || defaultValues[key]
      }
      $location.replace()
      $location.search($scope.queryParams)
    }, true)
  }
})
.controller('ctrl1', function ($scope, syncUrlWithScope) {
  syncUrlWithScope($scope, {foo: 'fooDefault'})
})
.controller('ctrl2', function ($scope, syncUrlWithScope) {
  syncUrlWithScope($scope, {bar: 'barDefault'})
})

正如您所看到的，我使用2个观察者来从网址绑定到范围＆＃39;还有“从范围到网址”。

但它有一个问题： https://github.com/angular-ui/ui-router/issues/1840

有没有更好的方法来实现相同类型的双向绑定而不会遇到这个问题？

Answer 1

让我的视图对搜索参数的反应在js侧和手动通过url操作改变后我有类似的东西：

$scope.$on('$locationChangeSuccess', function () {
    console.log('$locationChangeSuccess LogsController');
    $scope.searchParams = parseSearchToTags($location.search());
    ... do something with params ...
});

是否有规范的方法将url（angular-ui-router）中的查询参数与具有双向绑定的作用域上的变量同步？

1 个答案: