位置路徑搜索與param不導航到下一頁

我只想通過單擊編輯按鈕將參數傳遞到下一頁（編輯頁面）。我嘗試了下面的代碼，但它不工作。剛剛顯示的URL如下所示，但頁面顯示爲空白，並且控制器也未加載。這裏有什麼問題？位置路徑搜索與param不導航到下一頁

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}); 
}

來源

2017-01-10 digit

但你以任何方式使用路線PARAMS - https://docs.angularjs.org/api/ngRoute/service/$routeParams？ - 例如在你的'GroupEditCtrl'中，你可以注入$ routeParams來獲取id並將其保存在作用域/控制器模型上。 –

我不想使用routeParams，因爲後來我需要傳遞多個參數。 – digit

也許一些更多的代碼可能有助於瞭解發生了什麼問題，這個簡單的代碼片段似乎可以完成這項工作。

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('/'); 
 
    } 
 
}

<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>

來源

2017-01-10 08:47:13 Daniele

位置路徑搜索與param不導航到下一頁

回答

相關問題