angularjs – 与$routeParams的双向绑定？

发布时间：2020-12-17 07:42:52 所属栏目：安全来源：网络整理

导读：当使用ng-view和$routeProvider时,可以注入$routeParams来获取路径的值,如/ foo /：id /：user /：item.有没有办法在路径中设置这些参数？像$routeParams.id = 3,然后反映在url. 我知道这个效果可以通过$location.path()来实现,但是我希望能够提供更高层次的

当使用ng-view和$routeProvider时,可以注入$routeParams来获取路径的值,如/ foo /：id /：user /：item.有没有办法在路径中设置这些参数？像$routeParams.id = 3,然后反映在url.

我知道这个效果可以通过$location.path()来实现,但是我希望能够提供更高层次的抽象,不需要字符串操作.

这是我如何设法解决问题.

控制器：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!