8

是否可以在 AngularJS 中定义的路由中传递您自己的变量？

我这样做的原因是因为我必须处理同一页面的数据表示（一个是根据 JSON 数据过滤的视图），我需要做的就是给 $params 数组一个布尔标志让控制器功能知道该页面是过滤的还是未过滤的。

像这样的东西：

var Ctrl = function($scope, $params) {
  if($params.filtered) {
    //make sure that the ID is there and use a different URL for the JSON data
  }
  else {
    //use the URL for JSON data that fetches all the data
  }
};

Ctrl.$inject = ['$scope', '$routeParams'];

angular.modlule('App', []).config(['$routeProvider', function($routes) {

  $routes.when('/full/page',{
    templateURL : 'page.html',
    controller : Ctrl
  });

  $routes.when('/full/page/with/:id',{
    templateURL : 'page.html',
    controller : Ctrl,
    params : {
      filtered : true
    }
  });

}]);
4

4 回答 4

21

根据$routeProvider文档，具有属性的route参数：$routeProvider.when()resolve

应注入控制器的可选依赖关系映射。

像这样的东西应该工作：

function Ctrl($scope, isFiltered) {
  if(isFiltered) {
    //make sure that the ID is there and use a different URL for the JSON data
  }
  else {
    //use the URL for JSON data that fetches all the data
  }
}
Ctrl.$inject = ['$scope', 'isFiltered'];

angular.modlule('App', []).config(['$routeProvider', function($routeProvider) {

  $routeProvider.when('/full/page',{
    templateURL: 'page.html',
    controller: Ctrl
  });

  $routeProvider.when('/full/page/with/:id',{
    templateURL: 'page.html',
    controller: Ctrl,
    resolve: {
      isFiltered: function() { return true; }
    }
  });

}]);
于 2012-08-22T06:04:26.090 回答
1

AFAIK 目前无法为路线指定其他参数。话虽如此，如果 :id 被定义为$routeParams的一部分，则可以通过测试轻松涵盖您的用例。

问题是 AngularJS 会在“/full/page”或“/full/page/with/:id”上匹配你的路由，所以只需在控制器中测试 $routeParams 是否存在 id：

if ($routeParams.id)

你会知道在哪种情况下你是。

另一种方法是对不同的路由使用不同的控制器。

于 2012-08-21T20:57:38.290 回答
0

这样的方法必须适用于过滤器：

function caseFilterCtrl($scope, $routeParams, $http) {
    $http.get('./data/myDatas.json').success( function(data){
                                        var arr = new Array();
                                        for(var i=0; i < data.length; i++){
                                            if(data[i].filter == $routeParams.id){
                                                arr.push(data[i]);                              }
                                            }
                                        $scope.filtered= arr;
                                        });
    }

 caseFilterCtrl.$inject = ['$scope', '$routeParams', '$http']; //for minified bug issue

和路线：

angular.module('myFilterApp', []).
    config(['$routeProvider', function($routeProvider){ 
                $routeProvider.when('/filter/:id', {templateUrl: './view/partial/filter.html', controller: caseFilterCtrl});
                $routeProvider.otherwise({redirectTo: '/filter/01'});
            }
            ]);
于 2013-08-08T12:20:04.280 回答
0

您可以直接通过$route.current.$$route.

function Ctrl($scope, $route) {
  var filtered = $route.current.$$route.params.filtered;
}

angular.modlule('App', []).config(['$routeProvider', function($routeProvider) {

  $routeProvider.when('/full/page/with/:id',{
    templateURL: 'page.html',
    controller: Ctrl,
    params : {
      filtered : true
    }
  });

}]);

虽然它有效，但我仍然更喜欢一个resolve解决方案。params（或您选择的任何名称）可能会在未来版本中被 angularjs 覆盖。

于 2014-08-01T14:10:20.573 回答