At the start, my controller queries the server for a list of items and retrieves basic details for each item. When a user clicks on an item from the list, it then queries the server to fetch all the information related to that specific item, including some SVG data.
function ItemsCtrl($scope, $http) {
$scope.items = [];
$scope.selectedItemDesign = null;
$http.jsonp('/items/all?callback=JSON_CALLBACK').
success(function (data) {
$scope.items = data;
});
$scope.getItem = function (item) {
var index = $scope.items.indexOf(item);
if (!$scope.items[index].SVG) {
$http.jsonp('/items/byid/' + $scope.items[index]._id + '?callback=JSON_CALLBACK').
success(function (data) {
$scope.items[index].SVG = data.SVG;
$scope.selectedItemDesign = $scope.items[index].SVG;
});
} else {
$scope.selectedItemDesign = $scope.items[index].SVG;
}
};
}
The SVG data is displayed in the view directly using:
<div class="span9" ng-bind-html-unsafe="selectedItemDesign">
I am facing a challenge in attaching events to tags within the SVG to enable users to interact with it (specifically simple onClick events), but I am struggling to find a solution...
I originally thought I could access the DOM after the line;
$scope.selectedItem = $scope.items[index];