## API Reference (Directives) ### q `q` is an Angular native directive that acts as a bridge between Angular's directive system and the q-directive system. Look at the example below: ```html
Hello
Hello
``` Notice how the presence of the `q` directive makes all the difference. ### q-watch `q-watch` listens on the scope for the value provided in the attribute. It only uses a shallow `$watch` and triggers a `qUpdate` on the element only if the reference to the value changes. For example, whenever `user.name` changes below, the strong text will get updated with the latest `user.name`: ```html
Hello
``` ### q-watch-deep `q-watch` adds a deep watch on the scope for the value provided in the attribute, that not only checks for the same reference but also for deep object equality. It triggers a `qUpdate` on the element if anything in the object changes. For example, in the below example, if anything on the user changes, all the q-directives on the element and the descendants get updated at the same time. ```html
Hello there, ! Your registered username is , and email is . You have liked posts.
``` ### q-watch-collection `q-watch-collection` is like `q-watch`, but adds a `$watchCollection` listener instead. ### q-watch-group `q-watch-group` is like `q-watch`, but adds a `$watchGroup` listener instead. ### q-attr `q-attr` updates the attributes on the element it is added on whenever `qUpdate` is called on the element. ```html
``` ### q-class `q-attr` behaves pretty much like `ng-class`. It updates the classes on the element based on whether the values are truthy or falsy. ```html
``` ### q-click Not very different from `ng-click`. It uses an event delegation mechanism to add a click event listener on the element. It is compatible with other q-directives, where angular directives might not be. ### q-mouseover Pretty much like `ng-mouseover`. It uses an event delegation mechanism to add a mouseover event listener on the element. ### q-mouseout Pretty much like `ng-mouseout`. It uses an event delegation mechanism to add a mouseover event listener on the element. ### q-html A q-directive equivalent of `ng-bind-html`. Unlike `ng-bind-html`, q-html does not expect a `$sce` safe value. ```js function Ctrl($scope) { $scope.html = "You have a very bright future."; } ``` ```html
Hi User,
``` ### q-repeat `q-repeat` is a much faster version of `ng-repeat`. It adds a `$watchCollection` on the list provided in the attribute value and whenever it changes, it updates the list using a very performant method. It only supports the `item in collection` syntax, and does not support other descriptors like `track by`. Also it only supports iteration on arrays, and not on objects. ```html ``` ### q-style `q-style` is the q-directive version of `ng-style`. ```html
this is displayed
``` ```javascript // controller function Ctrl($scope) { $scope.display = 'none'; } ``` ### q-text `q-text` is a replacement for native interpolation directive (double braces). ```html
Hi
``` ### q-show `q-show` shows an element if the condition provided in the attribute is true. Works in the same way as `ng-show`. ### q-hide `q-hide` shows an element if the condition provided in the attribute is true. Works in the same way as `ng-hide`. ### q-compile `q-compile` is not a q-directive, but is a native Angular directive. Under the hood, it is basically a high priority terminal directive that pauses the compilation of Angular directives on the element it is added on, compiles the q-directives, and resumes the compilation of Angular directives by calling `$compile`. Here's an example: ```html ``` Notice how the presence of the `q-compile` directive made all the difference.