1

我在一个项目中使用 Angularjs。

对于登录注销，我正在设置一个范围变量，如下所示：

$scope.showButton = MyAuthService.isAuthenticated();

在标记中

<li ng-show="showLogout"><a href="#/logout" ng-click="logOut()">Logout</a></li>

当我注销时，它会重定向到登录页面，但注销菜单不会消失。

也试过这样：

$scope.showButton = MyAuthService.isAuthenticated();

在标记中：

<li ng-class=" showLogout ? 'showLogout' : 'hideLogOut' "><a href="#/logout" ng-click="logOut()">Logout</a></li>

似乎范围更改没有反映在我的视图中，但是当我重新加载页面时，“注销菜单”会按预期消失。

我还尝试了如下指令：

MyApp.directive('logoutbutton', function(MyAuthService) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs, controller) {
            attrs.$observe('logoutbutton', function() {
                updateCSS();
            });

            function updateCSS() {
                if (MyAuthService.isAuthorized()) {
                    element.css('display', 'inline');
                } else {
                    element.css('display', 'none');
                }
            }


        }
    }
});

也没有运气。

注销成功后如何隐藏它以及成功登录后如何显示“注销按钮”？

4

2 回答 2

6

在 MyAuthService.isAuthenticated() 上设置一个监视，当它触发时，将您的范围变量设置为该服务调用的结果。在您的第一个示例中，范围变量仅在控制器初始化时设置一次（我假设这是它正在运行的位置）。您可以在控制器中设置监视，或者，如果您想使用指令，可以在指令链接函数中设置。

像这样的东西：

$scope.$watch(MyAuthService.isAuthenticated, function(newVal, oldVal){
   $scope.showButton = newVal;
});
于 2013-08-26T17:39:52.013 回答
0

编辑：阅读 MarkRajcok 评论后，我意识到这个解决方案是从业务逻辑层耦合视图，它还暴露了要在服务逻辑之外更改的服务变量，这是不可取且容易出错的，因此提出了 $scope.$watch 解决方案抱歉，BoxerBucks 可能会更好。

您可以像 BoxerBucks 回答中那样使用 $scope.$watch ，但我认为使用观察者不适合服务，因为通常您希望访问不同控制器中的服务变量，期望当您更改服务变量时，所有控制器注入该服务将自动更新，所以我相信这是解决您的问题的好方法：

在您的 MyAuthServices 中执行以下操作：

app.service('MyAuthService', function(...){
    var MyAuthServiceObj = this;

    this.authenticated=false; // this is a boolean that will be modified by the following methods:

    // I supose that you have methods similar to these ones
    this.authenticateUser(...){
        ...
        // At some point you set the authenticated var to true
        MyAuthServiceObj.authenticated = true;
    }

    this.logout(){
        ....
        // At some point you set the authenticated var to false
        MyAuthServiceObj.authenticated = false;
    }

});

然后在您的控制器中执行以下操作：

$scope.myAuthService = MyAuthService;

最后在你的html中：

ng-show="myAuthService.authenticated"

这应该可以在不使用 BoxerBucks 回答中的观察者的情况下工作。

查看这个关于 AngularJS 提供者的优秀视频，了解如何正确使用服务。

于 2013-08-26T18:19:27.313 回答