在单页 Angular 应用程序中,我有一个控制器,充当 3 个屏幕的选项卡处理程序:
app.controller('tabCtrl', function ($scope, getName) {
$scope.tabs = {
issue_list: {'id': 'issue_list', 'title': 'Issues reported'},
issue_report: {'id': 'issue_report', 'title': 'Report issue'},
user_prefs: {'id': 'user_prefs', 'title': 'Your preferences'}
};
$scope.tab = $scope.tabs.issue_list;
$scope.activate = function(myid) {
if (myid in $scope.tabs) {
$scope.tab = $scope.tabs[myid];
}
};
});
由于我需要在用户通过另一个控制器成功提交数据后激活其中一个选项卡:
app.controller('issueCtrl', function ($scope, $http, server, getName) {
//lots of data-server stuff here
});
因为它需要从不同的地方,我准备重写'tabCtrl
'作为一个service
,以避免整个调用一个控制器从另一个东西。但与此同时,我只需单击一下即可调用两个控制器:
<button id="raise" ng-click="addIssue();activate('issue_list')" type="button">send now</button>
这是可以接受的AngularJS实践吗?看起来有点笨拙,但我是 Angular 的新手,有截止日期,这"只是工作"。
基本上,所有ngClick
用途都是事件处理的简单技巧,因为你真的不希望你的事件处理代码乱扔你的 DOM。 随着系统复杂性的增加,这些 ngClicks 应该演变成自己的指令,封装更多的逻辑。 如果它有效并且您有截止日期,请继续处理下一个问题。 这是AngularJS功能的一部分,它有大量方便的工具用于快速解决方案,以及用于更清晰的架构分离和模块化的丰富框架。
对于选项卡,您应该考虑编写指令。它们足够通用,您可以在许多地方重复使用它们。我并不是建议你使用整个角度引导 UI 项目,但你应该看看他们是如何构建他们的作为灵感的。
http://angular-ui.github.io/bootstrap/#/tabs