Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Yep, having done all of my AngularJS until now on a page with a controller, I was confused as to whether directives would work on pages that had no controller declared. Answer: they sure do, as long as the ng-app is running there. So I added tooltip to the wrapping div of each page that needed tooltips, wrote a directive called tooltip to figure out which page was calling for tooltips, and used a service to load the data in.</p> <p>HTML: </p> <pre><code>&lt;div class="pagewrapper" tooltip data-title="unique-page-title"&gt; </code></pre> <p>JSON: </p> <pre><code>[{ "extension": "unique-page-title", "contents": [ { "head": "Tooltip heading one", "content": "information on section 1" }, { "head": "Tooltip heading two", "content": "information on section 2" } ] }] </code></pre> <p>JS: </p> <pre><code>angular.module('myApp.services', []).service('tooltips', function ($http) { var requestPromise = $http.get('path/to/tooltips.json').then(function (d) { return d.data; }); this.getTooltips = function () { return requestPromise; }; }); angular.module('myApp.directives', []).directive('tooltip', function (tooltips, $filter) { return { restrict: 'A', link: function (scope, element, attr) { var elements = $('.forms .tooltip'), list = [], title = attr.title; //use the promisey service getTooltips to load the tooltips JSON tooltips.getTooltips().then(function (tips) { //Do some things to identify the correct place to insert the tooltip content, and insert it. }); } }; }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload