Question

在我的应用程序中，我有一个列表视图和单个列表项的详细视图。单击列表条目即可打开详细视图。这很好用。但是，现在我想在电子邮件中提供链接以直接访问详细的项目视图。

我想，我可能需要 ngRoute ，但它不能按预期工作。实际上，它根本不起作用。我永远不会调用alert()函数。

这是我的控制器的相关部分：

var myController = angular.module('myProject.controllers', ['ngRoute']);

myController.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $routeProvider.when('/show/:itemId', {
    templateUrl: 'item-details.html',
    controller: 'MyController'
  });

  $locationProvider.html5Mode(true);
}]);

myController.controller('MyController', ['$scope', '$routeParams', function($scope, $routeParams) {
  /** Other stuff... */

  $scope.$on('$routeChangeSuccess', function() {
    // $routeParams should be populated here
    alert("itemId: " + $routeParams.itemId);

    if ($routeParams.item) {
      myFunction($routeParams.itemId);
    }
  });

}]);

我尝试用

调用我的页面

http://www.example.com/index.html#/show/123

和

http://www.example.com/show/123

但没有效果。我有什么不对的吗？

Answer 1

过去我遇到了同样的问题我只使用了Jquery函数

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};


$scope.item = getUrlParameter('show');

但您需要将链接更改为：

http://dummy.com/?show=123

希望这是有效的，无论如何我还是这样做了。不过，不知道它是否是HAX。

Answer 2

我设法使用$location依赖关系通过URL将参数传递给我的控制器：

var myController = angular.module('myProject.controllers', []);

myController.config(['$locationProvider', function($locationProvider) {
  $locationProvider.html5Mode(true);
}]);

myController.controller('MyController', ['$scope', '$location', function($scope, $location) {
  /** Other stuff... */

  /** index.html?itemId=123 */
  var id = $location.search().itemId;

  if (id) {
    alert("Item id: " + id);
    myFunction(id);
  }

}]);

这适用于传递给控制器的参数。但是，它给我留下了一个问题：我的界面中的所有ngClick按钮现在也会附加查询参数，这有点烦人，因为我不想将itemId附加到{例如，{1}}按钮。

如果我找到任何解决方案，我会试着找出那个并报告回来。

此blog post对back有帮助。

通过URL参数将id传递给Angular

2 个答案: