nw-card.js 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738
  1. angular.module("noteWrangler")
  2. // $sce : Strict Contextual Escaping service.
  3. .directive('nwCard', function ($sce) {
  4. return {
  5. /* Runs after the directive has been compiled is is ready. Best spot to do
  6. any DOM manipulation or logic functionality for a directive.
  7. - "element" is the outermost element for the directive (div.card in nw-card.html)
  8. - "attrs" are the attributes set on "element": here "header" and "description"
  9. */
  10. link: function (scope, element, attrs) {
  11. scope.body = $sce.trustAsHtml(markdown.toHTML(scope.body));
  12. element("div.card").on("click", function () {
  13. element("div.card p").toggleClass("hidden");
  14. });
  15. },
  16. restrict: "E", // "E" is for Element.
  17. /* By default, directives have "scope: false": they inherit from their
  18. parents, so setting properties on the scope actually sets them on the
  19. parent scope. Setting the scope to a non empty value creates an isolated
  20. scope for the child... so it no longer has access to the parent scope.
  21. So we pass the required parts of the parent scope to the directive in the
  22. HTML attributes (see notes.html). But then we can't use the inline
  23. controller, the directive needs to know it can receive a header from the
  24. notes.html template.
  25. */
  26. scope: {
  27. // "@" means we'll be passing header as a (1-way) string.
  28. // Also available: "=" (2-way binding, expression brackets no longer
  29. // needed around note.header) and "&".
  30. header: "=",
  31. icon: "=",
  32. image: "=",
  33. },
  34. templateUrl: "templates/directives/nw-card.html",
  35. }
  36. });