title: Add pseudo class to a custom template / directive in angular
body: <p>I am working on a directive that creates a custom dropdown menu. A regular HTML select has a pseudo class active (e.g., .mydropdown:active) that can be styled using css. The select remains active while the dropdown menu is open. I would like to add this functionality to my directive. My template is based on buttons. The default behavior of buttons is to become active when clicked (mouse down) so while the dropdown is open they are no longer active.</p>
  
  <p>Here is what a drop down looks like when it is active:
  <img src="https://i.stack.imgur.com/2Yt4s.png" alt="A dropped select styled based on :dropped pseudo class"></p>
  
  <p>Here is what mine looks like when I interact with it and the button is no longer active. I want the button to remain active until the dropdown is closed:
  <img src="https://i.stack.imgur.com/A6nUY.png" alt="enter image description here"></p>
  
  <p>Here is the code for my directive:</p>
  
  <pre><code>var app_dropdowns = angular.module('dropdown.directives', ['offClick']);
  
  app_dropdowns.directive('dropdownMultiselect', function() {
      return {
          restrict: 'E',
          scope: {
              model: '=',
              options: '=',
              labelname: '@labelname',
              pre_selected: '=preSelected'
          },
          template: "&lt;div class='btn-group' data-ng-class='{open: open}' off-click='open=false'&gt;" +
              "&lt;button class='btn dropdown-toggle dropselect' active='true' data-ng-click='openDropdown();'&gt;{{labelname}}&lt;span class='caret' style = 'margin-left: 20px;'&gt;&lt;/span&gt;&lt;/button&gt;" + "&lt;ul class='dropdown-menu' style = 'min-width: 300px;' aria-labelledby='dropdownMenu'&gt;" + "&lt;li&gt;&lt;a data-ng-click='selectAll()'&gt;&lt;i class='fa fa-check-square-o'&gt;&lt;/i&gt;  Select All&lt;/a&gt;&lt;/li&gt;" + "&lt;li&gt;&lt;a data-ng-click='deselectAll();'&gt;&lt;i class='fa fa-square-o'&gt;&lt;/i&gt;  Select None&lt;/a&gt;&lt;/li&gt;" + "&lt;li class='divider'&gt;&lt;/li&gt;" + "&lt;li data-ng-repeat='option in options'&gt; &lt;a data-ng-click='setSelectedItem()'&gt;{{option.name}}&lt;span data-ng-class='isChecked(option._id)'&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;" + "&lt;/ul&gt;" + "&lt;/div&gt;",
          controller: function($scope) {
  
              $scope.model = [];
              $scope.options = [];
              $scope.openDropdown = function() {
              console.log($scope.options.length)
          if (!$scope.open &amp;&amp; $scope.options.length &gt; 0){
              $scope.open = true;
          } else {
              $scope.open = false;
          }
  
              };
  
              $scope.selectAll = function() {
                  $scope.model = [];
                  angular.forEach($scope.options, function(item) {
                      $scope.model.push(item);
                  });
                  console.log($scope.model);
              };
              $scope.deselectAll = function() {
                  $scope.model = [];
                  console.log($scope.model);
              };
              $scope.setSelectedItem = function() {
                  var _id = this.option._id;
                  var index = -1;
                  var i = 0;
  
                  angular.forEach($scope.model, function(item) {
                      console.log(_id);
                      console.log(item._id);
                      if (item._id == _id) {
                          index = i
                      }
                      i = i + 1;
                  });
                  if (index &gt; -1) {
                      $scope.model.splice(index, 1);
                  } else {
  
                      $scope.model.push(this.option);
                      console.log($scope.model);
                  }
  
                  return false;
              };
              $scope.isChecked = function(_id) {
                  var index = -1;
                  var i = 0;
                  angular.forEach($scope.model, function(item) {
                      if (item._id == _id) {
                          index = i
                      }
                      i = i + 1;
                  });
                  if (index &gt; -1) {
                      return 'fa fa-check pull-right';
                  }
                  return false;
              };
          }
      }
  });
  </code></pre>
  
  <p>I am creating css for the dropselect class:</p>
  
  <pre><code>.dropselect,
  .dropselect:hover
   {
      height: 45px;
      background-color: #ffffff;
      border: 2px solid #dce4ec;
      border-radius: 4px;
      color: #2c3e50;
      font-size: 15px;
      line-height: 1.42857143;
      padding: 10px 15px;
      margin: 0;
      position: relative;
      display: inline-block;
      vertical-align: middle;
  }
  
  .dropselect:active,
  .dropselect:focus {
      height: 45px;
      background-color: #ffffff;
      border: 2px solid black;
      border-radius: 4px;
      color: #2c3e50;
      font-size: 15px;
      line-height: 1.42857143;
      padding: 10px 15px;
      margin: 0;
      position: relative;
      display: inline-block;
      vertical-align: middle;
  }
  </code></pre>
  
  <p>Here is a fiddle to further explain: <a href="https://jsfiddle.net/krd3y6dx/7/" rel="nofollow noreferrer">https://jsfiddle.net/krd3y6dx/7/</a></p>