读取URL查询字符串

时间:2015-03-08 14:49:24

标签: angularjs

我有以下网址:

http://myUrl.com/#/chooseStyle?imgUpload=6_1405794123.jpg

我想阅读查询字符串中的imgUpload值 - 我正在尝试:

alert($location.search().imgUpload);

但没有任何警报,甚至没有警告 - 但控制台上写着:

$location is not defined

我需要将此值添加到控制器中以撤回数据,并且还要作为ng-src的一部分进入视图本身

我有什么不对的吗?这是我的应用配置:

capApp.config(function($locationProvider, $routeProvider) {
  $locationProvider.html5Mode(false);
  $routeProvider

  // route for the home page
  .when('/', {
    templateUrl : '/views/home.html',
    controller  : 'mainController'
  })

  // route for the caption it page
  .when('/capIt', {
    templateUrl : '/views/capIt.html',
    controller  : 'mainController'
  });
}):

这是观点:

<div class="container text-center">
  <h1 class="whiteTextShadow text-center top70">Choose your photo</h1>
</div>

<script>
  alert($location.search().imgUpload);
</script>

主控制器:

capApp.controller('mainController', function($scope) {
  $scope.message = 'Whoop it works!';
});

我的最终目标是找到一种解决方案来捕获和重用查询字符串中的数据。

我还要提一下,这只是我在Angular的第一周,到目前为止一直很喜欢它!需要学习很多......

2 个答案:

答案 0 :(得分:1)

<script>
  alert($location.search().imgUpload);
</script>

你在这里犯了两个错误:

  1. 在页面加载时执行代码,因此角度应用程序尚未启动
  2. 假设$ location是一个全局变量。不是。这是一个必须注入控制器(或任何其他角度组件)的角度服务。这应该会导致抛出异常并在控制台中显示。始终打开控制台,不要忽略抛出的异常。

答案 1 :(得分:1)

You should not do this
<script>
  alert($location.search().imgUpload);
</script>

// you need to inject the module $location 
//(either in service, or controller or wherever you want to use it)
// if you want to use their APIs

capApp.controller('mainController', function($scope, $location) {
  $scope.message = 'Whoop it works!';
  //use API of $location
  alert($location.search().imgUpload);
});