Question

使用ng-view和$routeProvider时，可以注入$routeParams来获取路径的值，例如/foo/:id/:user/:item。有没有办法在路径中设置这些参数？像$routeParams.id = 3这样的东西，然后将其反映在网址中。

我知道这种效果可以通过$location.path()来实现，但我希望能够实现更高级别的抽象，而不需要字符串操作。

Answer 1

以下是我设法解决问题的方法。

<强>控制器：

app.controller('MainCtrl', [
  '$scope', '$log', '$route', '$routeParams', '$location',
  function(scope, console, route, routeParams, location) {
    console.log('MainCtrl.create');
    scope.route = route;
    scope.routeParams = routeParams;
    scope.location = location;

    //1. This needs to be enabled for each controller that needs to watch routeParams
    //2. I believe some encapsulation and reuse through a service might be a better way
    //3. The reference to routeParams will not change so we need to enable deep dirty checking, hence the third parameter

    scope.$watch('routeParams', function(newVal, oldVal) {
      angular.forEach(newVal, function(v, k) {
        location.search(k, v);
      });
    }, true);
  }]);

模块声明+路线定义：

var app = angular.module('angularjs-starter', [], [
      '$routeProvider', '$locationProvider',
      function(routeProvider, locationProvider) {
        routeProvider.when('/main', {
          template : 'Main',
          controller : 'MainCtrl',
          reloadOnSearch : false
        });
      } ]);

<强>模板：

<body ng-controller="MainCtrl">
  <a href="#/main">No Params</a>
  <a href="#/main?param1=Hello&param2=World!">With Params</a>

  <div ng-view></div>

  <p>
    <span>param1</span>
    <input type="text" ng-model="routeParams['param1']">
  </p>
  <p>
    <span>param2</span>
    <input type="text" ng-model="routeParams['param2']">
  </p>

  <pre>location.path() = {{location.path()}}</pre>
  <pre>routeParams = {{routeParams}}</pre>
</body>

<强>演示：

plunker

<强>参考：

routeParams

Answer 2

同样，如果你想用$ location对url参数进行双向数据绑定，这个简单的函数会有所帮助。

bind_var_to_urlparam = function(variable_name, scope){
  // initial loading from urlparams and then
  // set a watch function to update the urlparams on update
  scope[variable_name] = $location.search()[variable_name];
  scope.$watch(variable_name, function(newVal, oldVal){
    var search_obj = {};
    search_obj[variable_name] = newVal;
    $location.search(search_obj);
  });
}

我在共享服务中使用它，这就是传入范围的原因。

Answer 3

我使用服务来创建双向绑定：

angular.module('app').service('urlBinder', ['$location', function($location) {
    this.bindOnScope = function(scope, name, urlParamName) {
        // update the url when the scope variable changes
        var unhookUrlUpdater = scope.$watch(name, function(newValue, oldValue) {
            if (!angular.equals(oldValue, newValue)) {
                $location.search(urlParamName, newValue);
            }
        });

        // update the scope variable when the url changes
        var unhookScopeUpdater = scope.$on('$locationChangeSuccess', function() {
            var value = $location.search()[urlParamName];

            if (!angular.equals(scope[name], value)) {
                scope[name] = value;
            }
        });

        // return a function to remove the hooks. Note that since these hooks are set up on the scope passed in, if that scope gets destroyed (e.g. because the user went to a different page and the controller is no longer present), then the hooks will be removed automatically.
        return function() {
            unhookUrlUpdater();
            unhookScopeUpdater();
        };
    };

    // the same thing but using getter/setter functions for when you want to bind to something not on the scope
    this.bind = function(scope, getter, setter, urlParamName) {
        var unhookUrlUpdater = scope.$watch(getter, function(newValue) {
            $location.search(urlParamName, newValue);
        });

        var unhookScopeUpdater = scope.$on('$locationChangeSuccess', function() {
            var value = $location.search()[urlParamName];

            if (!angular.equals(getter(), value)) {
                setter(value);
            }
        });

        return function() {
            unhookUrlUpdater();
            unhookScopeUpdater();
        };
    };
}]);

在您的控制器中：

angular.module('app').controller('ctrl', ['$scope', function($scope) {
    // if binding to something on the scope:
    urlBinder.bindToScope($scope, 'something', 'url-name');
    $scope.something = 'test';

    // or if the variable you want to bind isn't on the scope:
    var someVariable;
    urlBinder.bind(
        $scope,
        function() { return someVariable; },
        function(value) { someVariable = value; },
        'url-name');
}]);

然后，您可以将输入绑定到url：

<div ng-controller="ctrl">
    <input type="number" ng-model="something" />
</div>

您可能还需要在路由配置中设置reloadOnSearch : false，因为您不希望在网址的搜索位更改时销毁并重新创建控制器范围

使用$ routeParams进行双向绑定？

3 个答案: