Question

我只想通过单击编辑按钮将参数传递到下一页（编辑页面）。我尝试了以下代码，但它无法正常工作。 URL如下所示，但页面显示为空白，控制器也未加载。这有什么不对？

http://localhost:8080/#/group/edit?id=586351373b6bba91152ab744

查看

<md-button class="md-raised md-primary" ng-click="doEdit(item._id)" title="Edit">Edit</md-button>

路线

$routeProvider.when('/group/edit', {
      templateUrl: 'template/group_edit.html',
      controller: 'GroupEditCtrl'
})

控制器

$scope.doEdit = function (id) {
    $location.path('/group/edit').search({id: id});
}

Answer 1

也许更多的代码可以帮助理解出错的地方，这个简单的代码片段似乎可以完成这项任务。

＆＃13;

angular.module('BlankApp', ['ngMaterial', 'ngRoute']);

angular
  .module('BlankApp')
  .config(['$routeProvider', setupRoutes])
  .controller('ListController', ['$scope', '$location', ListController])
  .controller('GroupEditCtrl', ['$scope', '$location',GroupEditCtrl]);

function setupRoutes($routeProvider) {
  $routeProvider.
        when("/", { controller: "ListController", templateUrl: "list.html" });
  $routeProvider.when('/group/edit', {
      templateUrl: 'edit.html',
      controller: 'GroupEditCtrl'
  })
}

function ListController($scope, $location) {
  $scope.item = {_id: 123}
  $scope.doEdit = function (id) {
    $location.path('/group/edit').search({id: id});
  }
}

function GroupEditCtrl($scope, $location) {
  $scope.locationParam = $location.search().id
  $scope.goBack = function() {
    $location.path('/');
    }
}

＆＃13;

<html lang="en" >
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
  
</head>
<body ng-app="BlankApp" ng-cloak>
  
  <ng-view></ng-view>
 
  <script type="text/ng-template" id="list.html">
    <md-button class="md-raised md-primary" ng-click="doEdit(item._id)" title="Edit">Edit</md-button>
</script>
  
  <script type="text/ng-template" id="edit.html">
    ehy edit! id: <pre>{{locationParam | json}}</pre> <br/>
    <md-button class="md-raised md-primary" ng-click="goBack()" title="Back">Back</md-button>
</script>
  
  
  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
  
  
  
</body>
</html>

＆＃13;

使用参数的位置路径搜索无法导航到下一页

1 个答案: