Angular JS : $routeProvider 动态 url
Angular JS : $routeProvider with dynamic url
我有一个菜单显示用户所属的不同组名称。我准备了一个模板页面,以便当用户选择菜单的 GROUPS 之一时,模板的字段会发生变化。
<li><a href="#"><i class="glyphicon glyphicon-folder-open"></i>Home </a></li>
<li><a data-toggle="collapse" ng-init="getAllGroupsofUser()"data-target="#groups">My Groups</a>
<ul id="groups" class="collapse">
<li ng-repeat="group in groupsofUser" ng-controller="groupsCTRL"><a
ng-click="openPage(group)">{{group.name}}</a>
</li>
</ul>
</li>
群组已成功显示在菜单中。
我正在使用 ng-view 和 $routeProvider。
我的 $routeProvider
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller:"MyController"
})
.when('/group/:groupname', {
templateUrl: "groupTemplate.html",
controller:"groupsCTRL"
}).
otherwise({
redirectTo: '/'
});
}]);
我的控制器
app.controller( 'groupsCTRL',[ '$scope', '$http' , '$location', '$routeParams' ,function($scope, $http,$location,$routeParams){
$scope.groupeName= $routeParams.groupname;
$scope.openPage = function(group) {
$scope.groupselected = group;
console.log( "group: "+$scope.groupselected.id);
location.href = "#/group/"+group.name;
}
}]);
我的模板
<div class="row" >
<h1 class="page-header">Groupe {{groupeName}} </h1>
</div>
<div class="row">
{{groupselected.id}}
</div>
我的问题是显示了 groupeName,但是 groupselected.id 只显示在控制台中(因为我使用了 console.log( "group: "+$scope.groupselected.id);
)
请帮助我,我需要知道该组是否已传递到页面,因为在下一步中我需要显示有关该选定组的信息。
使用 $location.path
而不是 location.href
。此外,为了应用位置更改,& 然后您需要 运行 摘要循环。
代码
$scope.openPage = function(group) {
$scope.groupselected = group;
console.log( "group: "+$scope.groupselected.id);
$location.path("/group/"+group.name);
if(!$scope.$$phase) $scope.$apply();
};
我通过创建一个新的 RESTful Web 服务来获取按名称分组(因为它是唯一的)解决了我的问题
//get Group by Name
$scope.getGroupByName = function(groupname){
$scope.group=[];
$http({method: 'GET', url: '/getGroupByName/'+groupname}).
success(function(result) {
$scope.group = result.data;
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
};
我可以将我的 groupeName 传递给它并获取组
我有一个菜单显示用户所属的不同组名称。我准备了一个模板页面,以便当用户选择菜单的 GROUPS 之一时,模板的字段会发生变化。
<li><a href="#"><i class="glyphicon glyphicon-folder-open"></i>Home </a></li>
<li><a data-toggle="collapse" ng-init="getAllGroupsofUser()"data-target="#groups">My Groups</a>
<ul id="groups" class="collapse">
<li ng-repeat="group in groupsofUser" ng-controller="groupsCTRL"><a
ng-click="openPage(group)">{{group.name}}</a>
</li>
</ul>
</li>
群组已成功显示在菜单中。 我正在使用 ng-view 和 $routeProvider。
我的 $routeProvider
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller:"MyController"
})
.when('/group/:groupname', {
templateUrl: "groupTemplate.html",
controller:"groupsCTRL"
}).
otherwise({
redirectTo: '/'
});
}]);
我的控制器
app.controller( 'groupsCTRL',[ '$scope', '$http' , '$location', '$routeParams' ,function($scope, $http,$location,$routeParams){
$scope.groupeName= $routeParams.groupname;
$scope.openPage = function(group) {
$scope.groupselected = group;
console.log( "group: "+$scope.groupselected.id);
location.href = "#/group/"+group.name;
}
}]);
我的模板
<div class="row" >
<h1 class="page-header">Groupe {{groupeName}} </h1>
</div>
<div class="row">
{{groupselected.id}}
</div>
我的问题是显示了 groupeName,但是 groupselected.id 只显示在控制台中(因为我使用了 console.log( "group: "+$scope.groupselected.id);
)
请帮助我,我需要知道该组是否已传递到页面,因为在下一步中我需要显示有关该选定组的信息。
使用 $location.path
而不是 location.href
。此外,为了应用位置更改,& 然后您需要 运行 摘要循环。
代码
$scope.openPage = function(group) {
$scope.groupselected = group;
console.log( "group: "+$scope.groupselected.id);
$location.path("/group/"+group.name);
if(!$scope.$$phase) $scope.$apply();
};
我通过创建一个新的 RESTful Web 服务来获取按名称分组(因为它是唯一的)解决了我的问题
//get Group by Name
$scope.getGroupByName = function(groupname){
$scope.group=[];
$http({method: 'GET', url: '/getGroupByName/'+groupname}).
success(function(result) {
$scope.group = result.data;
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
};
我可以将我的 groupeName 传递给它并获取组