我一直坚持在单个页面上使用多个控制器。
我正在使用bootstrap和angular建立一个网站。
我有顶部导航栏(当前用作烧瓶的索引html),还有一个内容div,其中有ng-view。内容div由angular $ routeProvider启动的控制器填充。在导航栏中,我有一个用户图标和一个“注销”按钮,当其中一个控制器调用API并且用户登录后,该按钮应会更改。如何在没有后端重定向的情况下执行此操作?
我想我需要用另一个角度控制器渲染导航栏,但是如何在组件之间传递事件?是否有一些中介者API?我发现的唯一“解决方案”是基于ng-switch和ng-include。似乎太复杂了,在这种情况下,我宁愿使用jinja2继承。谁能指出我正确的手册,如何使用多个视图和一个路由来构建它?
最佳答案
您需要定义一个service
这个单例将在所有控制器之间共享。
var module = angular.module('myapp', []);
module.service('loginService', function() {
return {loggedIn: false}
});
然后在您的控制器中,您将获得如下代码:
app.controller('SomeController', ['$scope', 'loginService', function($scope, loginService) {
$scope.loginService= loginService;
$scope.$watch('loginService.loggedIn', function(newValue, oldValue) {
// TODO handle login/logout
});
}]);
另一种可能的解决方案是将根范围注入到登录服务中,并在用户登录或注销时发出事件。