Question

我有以下角度代码：

application.controller('ImageController', function ImageController($scope, ImageService, ngDialog) {
  $scope.open = function (image) {
    ngDialog.open({
      className: 'modal',
      plain: false,
      scope: scope,
      template: 'image'
    });
  }
};

在页面加载时，当url具有参数source和key时：

http://www.google.pt/?source=1&key=sdfd-sd-sf

我想打开并传递图像：

image.source = 1;
image.key = sdfd-sd-sf;

我该怎么做？

更新

我尝试使用ngroute：

$routeProvider
  .when('/:source?/:key?',
  {
    controller: "ImageController"
  }
)

使用以下路线：

domain.com/?source=ddf&key=23jf-34j

在ImageController上，我尝试使用以下方法获取参数source和key：

var image = { source: $routeParams.source, key: $routeParams.key };
if (image.source != null && image.key != null) {
  open(image);
}

但源和密钥都是未定义的。知道为什么吗？

Answer 1

如果您正在使用ngRoute，则可以将$routeParams注入您的控制器，然后执行以下操作：

image.source = $routeParams.source;
image.key = $routeParams.key;

关于它的漂亮的egghead视频：https://thinkster.io/egghead/routeparams-api/

更新

无需在when中指定查询参数名称（只有在使用domain.com/source/123/key/456之类的路径时才需要这样做），所以这是错误的：

.when('/:source?/:key?',

应该只是：

.when('/',

虽然您的网址包含hashbang（或html5mode）：

domain.com/#/?source=ddf&key=23jf-34j

然后这将正常工作：

var image = { source: $routeParams.source, key: $routeParams.key };

请注意，如果您未使用ng-view，由于其异步性质，参数将无法使用，因此您需要在控制器中使用此观察程序：

$scope.$on('$routeChangeSuccess', function() {
    console.log($routeParams);
});

或者，如果您注入$route而不是$routeParams，则可以使用：

$scope.$on('$routeChangeSuccess', function() {
    console.log($route.current.params);
});

它将返回相同的对象。

更新2

经过一番研究，似乎到目前为止最简单的方法是注入$location服务，只需使用：

var params = $location.search();
var image = { source: params.source, key: params.key };

以下是启用html5模式的简单示例（将与您的原始网址一起使用）：http://run.plnkr.co/sElZhTrI4JvGc0if/?source=SomeSrc&key=SomeKey

完整的Plunker：http://plnkr.co/edit/Jxol8e7YaghbNScICHqW

以角度调用页面加载的操作

1 个答案: