javascript - Angularjs - 将指令中的值绑定(bind)到 ng-show/hide 文档中的任何位置

Question

首先，我正在寻找比这个更好/更安全的解决方案，但目前考虑到我的需求，这是最有效的...

进入正题..

我有一个用于对用户进行身份验证的指令。这个想法是用户可以登录任何站点页面并停留在该页面上。当他们在页面加载时登录“管理”组件时。管理组件包装在所属的 div 中..

我需要指令中的一个值，以便在用户登录和注销时将 ng-show 设置为 true 或 false。 Ng-show 可以在页面中的任何/多个元素上。

这是我的指令

app.directive('login', function($http, $rootScope) {
return {
    restrict: 'E',
    template: "<form>" +
              "<label>Username</label>" +
              "<input type='text' ng-model='username'>" +
              "<label>Password</label>" +
              "<input type='password' ng-model='password'>" +
              "<br>" +
              "<input type='submit'>" +
              "</form>",
    link: function(scope, elem, attrs) {

        elem.bind('submit', function() {

            var user_data = {
                "username": scope.username,
                "password": scope.password,
            };

            $http.post("http://lessons.localhost/auth.php", user_data)
                .success(function(response) {

                            switch (response) {
                            case "success":
                                sessionStorage.userStatus = "success";
                                sessionStorage.frameStatus = "true";
             // I need framestatus to bind to ng-show on any element in the page
                                break;

                            case "failure":
                                sessionStorage.userStatus = "failure";
                                sessionStorage.frameStatus = "false";
                                break;

                             default:
                                sessionStorage.userStatus = "absent";
                                sessionStorage.frameStatus = "false";
                                break;
                            }
                  console.log(sessionStorage.userStatus + sessionStorage.frameStatus);
          });

        });

          console.log(sessionStorage.userStatus + sessionStorage.frameStatus);

     }
 }
 });

1. 或者，我如何创建一个名为 xyz 的指令，我可以根据登录状态将其应用于任何在代码检查器中未显示为 css 的元素？我确实需要解决第一个问题，但实际上我更喜欢更好的方法。

Answer 1

您可以通过在指令中设置 scope:true 来使指令的作用域从使用它的地方继承。然后根据登录请求的成功或失败更新指令中父作用域或 rootScope 的属性。

这是一个工作的plunker

http://plnkr.co/edit/JUato1?p=preview

请注意，我已将 userLoggedIn 设置为 true，即使出现错误，只是为了演示。