Angular-UI-路由器:ui-sref 不是 bui 带参数的 lding href
Angular-UI-Router: ui-sref not building href with parameters
我有一个 HTML 页面,一旦在用户浏览器中加载,'list' 状态就会激活,'list' 部分由 Angular 拉取并填充一个服务器列表。
每个服务器都有一个 'details' link 指定该服务器的 'details' 状态。
<td><a ui-sref="details({ serverName: '{{server.name}}' })">Details</a></td>
呈现时,'ui-sref' 会根据路由及其可选参数生成预期的 'href' url。
<a ui-sref="details({ serverName: 'SLCMedia' })" href="#/details/SLCMedia">Details</a>
单击后,它会按预期工作,并且 'details' 部分被拉出,并且在分配给该状态的控制器中拉出具有指定名称的服务器。
我 运行 遇到的问题是,一旦加载 'details' 部分,它也有 'ui-sref' 到 'edit' 状态。
<a ui-sref="edit({ serverName: '{{server.name}}' })">
<button class="btn btn-lg btn-labeled btn-primary">
<span class="btn-label icon fa fa-edit"></span>
Edit
</button>
</a>
但是当加载这个部分时,'ui-sref' 没有生成正确的 'href' url。
<a ui-sref="edit({ serverName: 'SLCMedia' })" href="#/edit/">
<button class="btn btn-lg btn-labeled btn-primary">
<span class="btn-label icon fa fa-edit"></span>
Edit
</button>
</a>
如您所见,'href' url 是“#/edit/”而不是预期的“#/edit/SLCMedia”。它必须是我所缺少的简单东西。跟状态变化有关系吗?
这里是为页面定义的所有 'states'。
// Create the Angular App to rule the Server Management Page
var serverApp = angular.module('serverApp', [
'ui.router',
'serverControllers',
'utilitiesService'
]);
serverApp.config(function ($stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/list");
// Now set up the states
$stateProvider
.state('list', {
url: '/list',
templateUrl: '/views/pages/servers/list.html',
controller: 'serverListCtrl'
})
.state('details', {
url: '/details/:serverName',
templateUrl: '/views/pages/servers/details.html',
controller: 'serverDetailsCtrl'
})
.state('create', {
url: '/create',
templateUrl: '/views/pages/servers/create.html'
})
.state('edit', {
url: '/edit/:serverName',
templateUrl: '/views/pages/servers/edit.html',
controller: 'serverEditCtrl'
})
});
这是我的控制器
var serverControllers = angular.module('serverControllers', ['utilitiesService']);
serverControllers.controller('serverListCtrl', function ($scope, $http) {
$http.get('/servers/getList').success(function (data) {
$scope.serverList = data;
});
});
serverControllers.controller('serverDetailsCtrl', function ($scope, $stateParams, $http) {
var serverName = $stateParams.serverName;
$http.get('/servers/getServerByName/' + serverName).success(function (data) {
$scope.server = data;
});
});
serverControllers.controller('serverEditCtrl', function ($scope, $stateParams, $http, $state, showAlertMessage) {
var serverName = $stateParams.serverName;
$http.get('/servers/getServerByName/' + serverName).success(function (data) {
$scope.server = data;
});
$scope.server.submitForm = function (item, event) {
console.log("--> Submitting Server Update");
//TIMDO: Verify all required fields have been included
var responsePromise = $http.post("/servers/postEdit", $scope.server, {});
responsePromise.success(function(dataFromServer, status, headers, config) {
showAlertMessage({
type: 'success',
title: 'Success',
message: 'Server information updated'
});
$state.go('clear');
});
responsePromise.error(function(data, status, headers, config) {
showAlertMessage({
type: 'error',
title: 'Success',
message: 'Server information updated'
});
});
}
});
嗯,我可能误解了你的问题,但我发现你的代码外观与我的代码外观之间至少有一个明显的区别。
我的 angular-ui-路由器链接如下所示:
<a ui-sref="reps-show({ id: rep.id })">{{rep.name}}</a>
不同之处在于 rep.id
周围没有大括号。所以我想知道是否改变这个
<td><a ui-sref="details({ serverName: '{{server.name}}' })">Details</a></td>
至此
<td><a ui-sref="details({ serverName: server.name })">Details</a></td>
可能会为你做点什么。
可能不是,但这是我首先想到的。
我创建了 simplified, but working version here。因为没有什么明显的错误。这个例子至少应该可以帮助您确保:
All you are trying to do is supposed to be working.
以下是状态:
// States
$stateProvider
.state('list', {
url: "/list",
templateUrl: 'tpl.list.html',
controller: 'serverListCtrl',
})
.state('edit', {
url: '/edit/:serverName',
templateUrl: 'tpl.html',
controller: 'serverEditCtrl'
})
这里是列表加载数据的控制器
.controller('serverListCtrl', ['$scope', '$http', function ($scope, $http) {
$http.get('server.json').success(function (data) {
$scope.serverList = data;
});
}])
(server.json) - 数据示例
[
{"name":"abc"},
{"name":"def"},
{"name":"xyz"}
]
和相同的模板:
<li ng-repeat="server in serverList">
<a ui-sref="edit({ serverName: '{{server.name}}' })">
<button class="btn btn-lg btn-labeled btn-primary">
<span class="btn-label icon fa fa-edit"></span>
Edit {{server.name}}
</button>
</a>
</li>
一切都按预期进行。检查一下 here.
我想贡献另一个数据点,以防其他人和我一样带着类似的问题来到这里。
我在我的应用程序中使用了非花括号版本,但它无法正常工作。我的细节涉及 Google 地图 中的信息窗口。我相信有一个渲染顺序 "issue" 使得 ui-sref link 的数据 required 不存在,当它最终存在时,它是从不 "re-rendered".
原始(非工作)版本:
%h3
{{window_info.data.user.name || "Mystery Person"}}
%a.fa.fa-info-circle{ ui: { sref: 'users.show({id: window_info.data.user.id })' } }
%pre {{window_info.data.user.id | json}}
工作版本:
%h3
{{window_info.data.user.name || "Mystery Person"}}
%a.fa.fa-info-circle{ ui: { sref: "users.show({id: '{{ window_info.data.user.id }}' })" } }
%pre {{window_info.data.user.id | json}}
我将 %pre
标签与信息放在一起,以向自己证明数据确实存在(至少 ultimately/eventually),但即使仍然是 [=41] 的原始代码=] 没有工作。我根据 OP 情况调整了我的代码以使用插值花括号版本并且它起作用了。
结论:您的解决方案可能取决于父组件处理渲染的方式。 Google Maps 在这种情况下因渲染 "funky"(技术术语)而臭名昭著,尤其是在 Angu-land。
我有一个 HTML 页面,一旦在用户浏览器中加载,'list' 状态就会激活,'list' 部分由 Angular 拉取并填充一个服务器列表。
每个服务器都有一个 'details' link 指定该服务器的 'details' 状态。
<td><a ui-sref="details({ serverName: '{{server.name}}' })">Details</a></td>
呈现时,'ui-sref' 会根据路由及其可选参数生成预期的 'href' url。
<a ui-sref="details({ serverName: 'SLCMedia' })" href="#/details/SLCMedia">Details</a>
单击后,它会按预期工作,并且 'details' 部分被拉出,并且在分配给该状态的控制器中拉出具有指定名称的服务器。
我 运行 遇到的问题是,一旦加载 'details' 部分,它也有 'ui-sref' 到 'edit' 状态。
<a ui-sref="edit({ serverName: '{{server.name}}' })">
<button class="btn btn-lg btn-labeled btn-primary">
<span class="btn-label icon fa fa-edit"></span>
Edit
</button>
</a>
但是当加载这个部分时,'ui-sref' 没有生成正确的 'href' url。
<a ui-sref="edit({ serverName: 'SLCMedia' })" href="#/edit/">
<button class="btn btn-lg btn-labeled btn-primary">
<span class="btn-label icon fa fa-edit"></span>
Edit
</button>
</a>
如您所见,'href' url 是“#/edit/”而不是预期的“#/edit/SLCMedia”。它必须是我所缺少的简单东西。跟状态变化有关系吗?
这里是为页面定义的所有 'states'。
// Create the Angular App to rule the Server Management Page
var serverApp = angular.module('serverApp', [
'ui.router',
'serverControllers',
'utilitiesService'
]);
serverApp.config(function ($stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/list");
// Now set up the states
$stateProvider
.state('list', {
url: '/list',
templateUrl: '/views/pages/servers/list.html',
controller: 'serverListCtrl'
})
.state('details', {
url: '/details/:serverName',
templateUrl: '/views/pages/servers/details.html',
controller: 'serverDetailsCtrl'
})
.state('create', {
url: '/create',
templateUrl: '/views/pages/servers/create.html'
})
.state('edit', {
url: '/edit/:serverName',
templateUrl: '/views/pages/servers/edit.html',
controller: 'serverEditCtrl'
})
});
这是我的控制器
var serverControllers = angular.module('serverControllers', ['utilitiesService']);
serverControllers.controller('serverListCtrl', function ($scope, $http) {
$http.get('/servers/getList').success(function (data) {
$scope.serverList = data;
});
});
serverControllers.controller('serverDetailsCtrl', function ($scope, $stateParams, $http) {
var serverName = $stateParams.serverName;
$http.get('/servers/getServerByName/' + serverName).success(function (data) {
$scope.server = data;
});
});
serverControllers.controller('serverEditCtrl', function ($scope, $stateParams, $http, $state, showAlertMessage) {
var serverName = $stateParams.serverName;
$http.get('/servers/getServerByName/' + serverName).success(function (data) {
$scope.server = data;
});
$scope.server.submitForm = function (item, event) {
console.log("--> Submitting Server Update");
//TIMDO: Verify all required fields have been included
var responsePromise = $http.post("/servers/postEdit", $scope.server, {});
responsePromise.success(function(dataFromServer, status, headers, config) {
showAlertMessage({
type: 'success',
title: 'Success',
message: 'Server information updated'
});
$state.go('clear');
});
responsePromise.error(function(data, status, headers, config) {
showAlertMessage({
type: 'error',
title: 'Success',
message: 'Server information updated'
});
});
}
});
嗯,我可能误解了你的问题,但我发现你的代码外观与我的代码外观之间至少有一个明显的区别。
我的 angular-ui-路由器链接如下所示:
<a ui-sref="reps-show({ id: rep.id })">{{rep.name}}</a>
不同之处在于 rep.id
周围没有大括号。所以我想知道是否改变这个
<td><a ui-sref="details({ serverName: '{{server.name}}' })">Details</a></td>
至此
<td><a ui-sref="details({ serverName: server.name })">Details</a></td>
可能会为你做点什么。
可能不是,但这是我首先想到的。
我创建了 simplified, but working version here。因为没有什么明显的错误。这个例子至少应该可以帮助您确保:
All you are trying to do is supposed to be working.
以下是状态:
// States
$stateProvider
.state('list', {
url: "/list",
templateUrl: 'tpl.list.html',
controller: 'serverListCtrl',
})
.state('edit', {
url: '/edit/:serverName',
templateUrl: 'tpl.html',
controller: 'serverEditCtrl'
})
这里是列表加载数据的控制器
.controller('serverListCtrl', ['$scope', '$http', function ($scope, $http) {
$http.get('server.json').success(function (data) {
$scope.serverList = data;
});
}])
(server.json) - 数据示例
[
{"name":"abc"},
{"name":"def"},
{"name":"xyz"}
]
和相同的模板:
<li ng-repeat="server in serverList">
<a ui-sref="edit({ serverName: '{{server.name}}' })">
<button class="btn btn-lg btn-labeled btn-primary">
<span class="btn-label icon fa fa-edit"></span>
Edit {{server.name}}
</button>
</a>
</li>
一切都按预期进行。检查一下 here.
我想贡献另一个数据点,以防其他人和我一样带着类似的问题来到这里。
我在我的应用程序中使用了非花括号版本,但它无法正常工作。我的细节涉及 Google 地图 中的信息窗口。我相信有一个渲染顺序 "issue" 使得 ui-sref link 的数据 required 不存在,当它最终存在时,它是从不 "re-rendered".
原始(非工作)版本:
%h3
{{window_info.data.user.name || "Mystery Person"}}
%a.fa.fa-info-circle{ ui: { sref: 'users.show({id: window_info.data.user.id })' } }
%pre {{window_info.data.user.id | json}}
工作版本:
%h3
{{window_info.data.user.name || "Mystery Person"}}
%a.fa.fa-info-circle{ ui: { sref: "users.show({id: '{{ window_info.data.user.id }}' })" } }
%pre {{window_info.data.user.id | json}}
我将 %pre
标签与信息放在一起,以向自己证明数据确实存在(至少 ultimately/eventually),但即使仍然是 [=41] 的原始代码=] 没有工作。我根据 OP 情况调整了我的代码以使用插值花括号版本并且它起作用了。
结论:您的解决方案可能取决于父组件处理渲染的方式。 Google Maps 在这种情况下因渲染 "funky"(技术术语)而臭名昭著,尤其是在 Angu-land。