Javascript 用于为经过身份验证的用户隐藏/显示元素的指令

在自定义指令处理程序中隐藏/显示元素的正确方法是什么

在我的应用程序中，有许多元素应该根据用户身份验证状态隐藏/显示。跟踪我创建的“Auth”服务的状态。目前，我担心“Auth”服务几乎被注入到每个控制器中。为了避免这种情况，我决定最好创建一个指令，根据“Auth”服务状态显示/隐藏元素。差不多

<div data-app-auth-only="true">Content is visible only for authenticated users</div>

内容仅对经过身份验证的用户可见

我已经阅读了angular指令教程，创建了指令并在Auth服务上设置了watch。每当Auth状态发生变化时，我就会触发处理程序，但我一直在隐藏/显示元素。在一些教程中，我看到人们使用“element.hide（）”命令，但由于某些原因，在我的例子中没有定义hide（）

下面是我的例子

---

我还担心指令是否正确。这类任务的最佳实践是什么？是否值得制定一个指令或将“Auth”注入根作用域会更好？

我所做的是将服务（在您的情况下是AuthService）注入到每个相关的控制器，并放置在HTML元素上：

<div ng-show="showAuthContent()">Create Ticket</div>

解决方案 在这些教程中，

hide（）

和

show（）

很可能来自。要使用这些方法，您需要在添加AngularJS之前添加jQuery。然后，更改指令，例如：

app.directive('appAuthOnly', ['Auth', function(Auth) {
  function link(scope, element, attrs) {
    scope.$watch(Auth.isAuth, function(value, oldValue) {
      if (Auth.isAuth()) {
        element.show();
      } else {
        element.hide();
      }
    });
  }

  return {
    link: link
  };
}]);

如果不想向jQuery添加依赖项，可以使用

element.addClass（“我的类名”）

和

element.removeClass（“我的类名”）

。这两种方法包括在本手册中。在本例中，

my class name

是一个CSS类，它将display设置为none（

display:none

）

你可以看看答案。我试着尽可能少地修改你的代码

社论 在我的项目中，我在这个场景中使用了一个指令。我发现它们既简单又灵活。如果最终需要权限，则可以向指令传递一个参数，以使用Auth工厂检查给定的权限。（

app auth only=“my permission”

）此时，我还会将指令重命名为类似于

required permissions=“view:this，view:that

在我看来，这样的指令作为注释、类或元素是没有意义的，所以我也会将其仅限于属性

app.directive('appAuthOnly', ['Auth', function(Auth) {
  return {
    restrict: 'A',  // Forces the directive to be an attribute.
    link: function link(scope, element, attrs) {
      scope.$watch(Auth.isAuth, function(value, oldValue) {
        if (Auth.isAuth()) {
          element.show();
        } else {
          element.hide();
        }
      });
    }
  };
}]);

---

在这两个例子中，我使用jQuery是为了简单。在一个实际的项目中，我不想为此包含jQuery。我将实现

addClass

和

removeClass

解决方案。我发现包含jQuery很容易回到我糟糕的jQuery习惯中。

隐藏/显示元素仍然将其保留在DOM中。您不需要ant此类信息易受简单的

.show（）攻击

在控制台中，最好不要首先从服务器发送。在我的情况下，这不是问题。内容不是秘密，如果未经身份验证的用户看到它也没关系。这只是查看和设计的问题。实际上，内容将是一些控制元素，如“创建票证”按钮。未经身份验证的用户w因为服务器端有额外的安全检查，所以我无法使用它。我明白了。我当时写了我的答案。这就是我以前的答案。这段代码在每个控制器中都有。如此大规模的重复提醒了我，我决定寻求更好的解决方案。所以你认为我不应该担心这种重复并继续注入身份验证service？@Soteric是的，你不应该担心。你的逻辑在代码方面不是重复的，你有一个服务来控制它，每个控制器都必须通过它（这也有利于维护）。在我看来，这就是为什么AngularJS是一个好的框架的一部分：）@Soteric另一件事-如果你在外部作用域上有一个控制器，你可以在该控制器上有

showAuthContent

函数，你可以从所有其他嵌套的控制器调用if。这样，该函数只会被编写一次。

app.directive('appAuthOnly', ['Auth', function(Auth) {
  return {
    restrict: 'A',  // Forces the directive to be an attribute.
    link: function link(scope, element, attrs) {
      scope.$watch(Auth.isAuth, function(value, oldValue) {
        if (Auth.isAuth()) {
          element.show();
        } else {
          element.hide();
        }
      });
    }
  };
}]);