什么是隐藏的正确方法/自定义指令处理器表演元素？

What is the correct way to hide/show elements in custom directive handler?

在我的应用我有哪些应该被隐藏/基于用户的身份验证状态显示元素的个数。为了跟踪状态，我创建验证服务。此刻我担心验证服务注入到几乎每个控制器。为了避免这种情况，我决定，这将是最好创建一个指令，它会显示/隐藏基于验证服务状态的元素。类似

In my application I have number of elements which should be hidden/shown based on user authentication state. To track the state I created 'Auth' service. At the moment I'm concerned that 'Auth' service is injected almost into each controller. To avoid this I decided that it would be better to create a directive which will show/hide elements based on 'Auth' service state. Something like

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

我读过角指令教程，创建指令并设置监视上验证服务。我得到每当验证状态被改变，但我被困在隐藏/显示元素引发的处理程序。在一些教程，我看到人们用'element.hide（）命令，但由于某些原因，隐藏（）是不是在我的情况定义的。

I've read angular directive tutorial, created directive and set watch on Auth service. I get the handler triggered whenever Auth state is changed but I'm stuck on hiding/showing element. At some tutorials I see people use 'element.hide()' command but for some reason the hide() is not defined in my case.

下面是链接到我的例子Plunkr 。

我也担心，如果该指令是这里的正确方法。什么是此类任务的最佳做法？它是否值得做出的指令或者注入'验证'成根范围会比较好？

I'm also concerned if the directive is the correct way here. What is the best practice for such kind of task? Does it worth to make a directive or maybe inject 'Auth' into root scope would be better?

推荐答案

在这些教程，隐藏（）和显示（）最有可能来自的 jQuery的。要使用这些方法，你需要添加AngularJS之前添加的jQuery。然后，改变你的指令类似：

Solution

In those tutorials, hide() and show() most likely comes from jQuery. To use those methods, you need to add jQuery before adding AngularJS. Then, change your directive for something like:

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（我的类名）。这两种方法都包含 AngularJS（jqLit​​e）。在这种情况下，我的类名是设定显示为无一个CSS类（显示：无）。

If you don't want to add a dependency to jQuery, you can use element.addClass("my-class-name") and element.removeClass("my-class-name"). These two methods are included with AngularJS (jqLite). In this case, my-class-name is a CSS class that sets display to none (display: none).

您可以看一下为解决我分叉plunker 。我试着改变你的code尽可能少。

You can look at my forked plunker for the solution. I tried to change your code as little as possible.

在我的项目，我用一个指令，在这种情况下。我发现他们是简单，灵活。如果你最终需要的权限，你可以将参数传递给你的指令，以检查您的验证工厂获准。 （ APP-AUTH-仅=我的许可权），在这一点上，我也重新命名我的指令，像所需的权限=观点：这个，观点：即

In my projects, I use a directive in this scenario. I found them to be simple and flexible. If you eventually need permissions, you can pass a parameter to your directive to check for a given permission with your Auth factory. (app-auth-only="my-permission") At that point, I would also rename my directive to something like required-permissions="view:this, view:that.

在我看来，这样的指令没有意义的评论，类或元素。所以，我也将限制其仅用于属性。

In my opinion, such directives doesn't make sense as a comment, class or element. So I would also restrict it for attributes only.

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

In both examples, I use jQuery for simplicity. In a real project, I wouldn't want to include jQuery for this. I would implement the addClass and removeClass solution. I found that including jQuery makes it too easy to go back to my bad jQuery habbits.