docs: function baQueryDirective(angularDirective, directiveName) {
      return ['$compile', 'BaseAppsApi', function ($compile, BaseAppsApi) {
        // create unique scope property for media query result, must be unique to avoid collision with other ba-query directives
        // property set upon element compilation or else all similar directives (i.e. ba-if-*/ba-show-*/ba-hide-*) will get the same value
        var queryResult;
  
        return {
          priority: 1000, // must compile directive before any others
          terminal: true, // don't compile any other directive after this
                          // we'll fix this with a recompile
          restrict: 'A',
          compile: compile
        };
  
        // From here onward, scope[queryResult] refers to the result of running the provided query
        function compile(element, attrs) {
          var previousParam;
  
          // set unique property
          queryResult = (directiveName + BaseAppsApi.generateUuid()).replace(/-/g,'');
  
          // set default configuration
          element.attr('ba-query-not', false);
          element.attr('ba-query-only', false);
          element.attr('ba-query-or-smaller', false);
          element.attr('ba-query-scope-prop', queryResult);
  
          // parse directive attribute for query parameters
          element.attr(directiveName).split(' ').forEach(function(param) {
            if (param) {
              // add ba-query directive and configuration attributes
              switch (param) {
                case "not":
                  element.attr('ba-query-not', true);
                  element.attr('ba-query-only', true);
                  break;
                case "only":
                  element.attr('ba-query-only', true);
                  break;
                case "or":
                  break;
                case "smaller":
                  // allow usage of smaller keyword if preceeded by 'or' keyword
                  if (previousParam === "or") {
                    element.attr('ba-query-or-smaller', true);
                  }
                  break;
                default:
                  element.attr('ba-query', param);
                  break;
              }
  
              previousParam = param;
            }
          });
  
          // add/update angular directive
          if (!element.attr(angularDirective)) {
            element.attr(angularDirective, queryResult);
          } else {
            element.attr(angularDirective, queryResult + ' && (' + element.attr(angularDirective) + ')');
          }
  
          // remove directive from current element to avoid infinite recompile
          element.removeAttr(directiveName);
          element.removeAttr('data-' + directiveName);
  
          return {
            pre: function (scope, element, attrs) {
            },
            post: function (scope, element, attrs) {
              // recompile
              $compile(element)(scope);
            }
          };
        }
      }];
    }