We are completely new to the world of AngularJS and are currently facing a challenge in displaying HTML tooltips from a custom directive within Angular. As beginners in this technology, we are struggling to find the right solution for this issue.
Initially, we had a working version of the solution using Angular with Web API. However, we realized that the mouseover events and CRUD functionality should be handled in directives rather than the controller. So, we are now extracting that code and rebuilding it.
Right now, in a Plunker Proof of Concept (POC), we have:
- Loaded a very small SVG file.
- Loaded a small JSON data file.
- Attached a custom directive hover event to each SVG element.
- When a specific element is hovered over, an alert() displays the element's ID.
Sample SVG:
<g id="f3s362c16">
<rect x="577.5" y="533.2" fill="none" width="22.2" height="25.7"/>
<polyline fill="none" stroke="#CEDEED" stroke-width="0.6468" stroke-miterlimit="10" points="590.4,559 577.5,559 577.5,533.2
599.5,533.2 599.5,550 "/>
<text transform="matrix(1 0 0 1 590.9561 557.4941)" font-family="arial, sans-serif" font-size="5.1408">362.16</text>
JSON Sample:
{"Id":1,"empNum":null,"fName":" Bun E.","lName":"Carlos","refacName":null,"deptId":"Drums","divisionId":null,"jobDesc":"Drummer","seatTypeId":1,"officeCode":null,"phone":null,"seatId":"f3s362c12 ","oldSeatId":null,"floor":3,"section":"313 ","seat":"12 "}
We have defined a scope variable "empData" for the JSON data in the HTML file:
{{ **empData** }}
Data loading in the controller file:
var onLoadComplete = function (response) {
$scope.**empData** = response.data;
}
//error
var onError = function(reason) {
$scope.error = "Could not get the data";
}
//get data
$http.get('data.json')
.then(onLoadComplete, onError);
Directive to load SVG and add directive to cube element
//directive loads SVG into DOM
angular.module('FFPA').directive('svgFloorplan', ['$compile', function ($compile) {
return {
restrict: 'A',
templateUrl: 'test.svg',
link: function (scope, element, attrs) {
var groups = element[0].querySelectorAll("g[id^='f3']")
angular.forEach(groups, function (g,key) {
var cubeElement = angular.element(g);
//Wrap the cube DOM element as an Angular jqLite element.
cubeElement.attr("cubehvr", "");
$compile(cubeElement)(scope);
})
}
}
}]);
Cube Hover Directive:
angular.module("FFPA").directive('cubehvr', ['$compile', function ($compile) {
return {
restrict: 'A',
scope: true,
empData: "=",
link: function (scope, element, attrs) {...}
});
At this point, we're stuck on how to access the view/page scope variable {{empData}} in the hover directive since we're already passing information to the cubeHvr directive:
angular.module("FFPA").directive('cubehvr', ['$compile', function ($compile) {...}
Any guidance or assistance you can provide would be greatly appreciated. Thank you.