我在一个Angular向导式的web应用中有一些导航按钮。出于美观的原因,它们需要从每个部分中删除,并添加到根目录"index.html":
<!-- Global navigation buttons for all partials -->
<div class="navbar navbar-fixed-top">
<button class="btn btn-default" back-action>Back</button>
<button class="btn btn-default" next-action>Next</button>
</div>
<div class="container ng-view ng-cloak">
<!-- Partials rendered in here, managed by $routeProvider-->
</div>
我试图使用指令和作用域变量来隔离这个逻辑,以绑定click事件并为每个部分应用目标目的地:
.directive('nextAction', ['$location', function($location) {
return {
restrict: 'A',
link: function(scope, elm) {
elm.on('click', function () {
var nextUrl = scope.nextUrl;
$location.url(nextUrl);
});
}
};
}])
然后在每个控制器中定义URL:
.controller('FirstStepCtrl', ['$scope', function ($scope) {
$scope.backUrl = '/';
$scope.nextUrl = '/first/second';
...
问题是scope.nextUrl
未定义,因为指令作用域不继承控制器作用域。
伴随着它目前不工作的事实,这种方法对我来说似乎也有点脆弱,因为它依赖于嵌入在控制器代码中的导航逻辑。
我如何创建更好的全局返回/下一个按钮,动态重定向基于当前的"页面"?
使用状态管理器来处理back和next url。减轻控制者的责任。然后把它注入到处理back和next按钮的指令中。
.factory('stateMgr', ['$rootScope', function ($rootScope) {
var stateMgr = {
backUrl: '',
nextUrl: ''
};
$rootScope.$on('$routeChangeSuccess', function (nextRoute, lastRoute) {
// logic in here will look at nextRoute and then set back and next urls
// based on new route
// e.g. stateMgr.backUrl = '/'; stateMgr.nextUrl = '/whatever';
});
return stateMgr;
}]);
然后.controller('FirstStepCtrl', ['$scope', function ($scope) {
// do not need to do anything with back/next urls in here
...
和
.directive('nextAction', ['$location', 'stateMgr', function($location, stateMgr) {
return {
restrict: 'A',
link: function(scope, elm) {
elm.on('click', function () {
$location.url(stateMgr.nextUrl);
});
}
};
}])