2017-01-10 10 views
0

編集ボタンをクリックして次のページ(編集ページ)にパラメータを渡したいだけです。私は次のコードを試しましたが、動作しません。下の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}); 
} 
+1

いますが、どのような方法で、ルートのparamsを使用している - https://docs.angularjs.org/api/ngRoute/service/$routeParams? - 例えば'GroupEditCtrl'に$ routeParamsを注入してIDを取得し、スコープ/コントローラモデルに保存することができます。 –

+0

後で私は複数のパラメータを渡す必要があるので、私はrouteParamsを使用したくありません。 – digit

答えて

0

何が起こっているのかを理解するにはもっとコードが役立つかもしれませんが、この単純なスニペットは仕事をするようです。

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>

関連する問題