angularjs - $routeParams との双方向バインディング?

Question

ng-viewとを使用する場合、のようにパスの値を取得するため$routeProviderに注入することができます。これらのパラメータをパスに設定する方法はありますか? のようなもので、それを URL に反映させます。$routeParams/foo/:id/:user/:item$routeParams.id = 3

この効果はを介して達成できることはわかって$location.path()いますが、文字列操作を必要としない、より高いレベルの抽象化を望んでいます。

score 12 · Accepted Answer

これが私が問題を解決する方法です。

コントローラー：

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>

デモ:

プランカー

参考文献：

routeParams

score 1 · Accepted Answer

同様に、$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);
  });
}

これを共有サービスから使用しているため、スコープが渡されます。

score 0 · Accepted Answer

サービスを使用して双方向バインディングを作成します。

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>

URL の検索ビットが変更reloadOnSearch : falseされるたびにコントローラーのスコープを破棄して再作成したくないため、ルート構成で設定する必要がある場合もあります。

angularjs - $routeParams との双方向バインディング?

3 に答える 3

Related

Reference