As a newcomer to angular, I have taken on the challenge of creating a complex directive. I have managed to get most of the directive working, but I am facing two issues that seem to be scope-related.
Here is the code for my directive:
angular.module('test')
.directive('testKitDesigner', function () {
panels = [];
function bindEvents() {
console.log("bindingEvents");
var styledElements = ["piping", "panel-1", "panel-2", "panel-3", "panel-4", "panel-5", "panel-6", "panel-7", "panel-8", "panel-9", "panel-10"];
for (var i = 0; i < styledElements.length; i++) {
var target = document.getElementById(styledElements[i]);
console.log(target);
if (target) {
bindEvent(target);
}
}
};
function bindEvent(target) {
...
The template for the designer looks like this:
<div class="base" test-svg="/General/Polo/Angelus">
</div>
<div class="options">
<h1>Simple kit designer</h1>
<div ng-hide="step != 0">
<p>Choose your sport.</p>
<ul class="list-unstyled">
<li><a href ng-click="setSport('Netball');">Netball</a></li>
<li><a href ng-click="setSport('General');">General</a></li>
</ul>
</div>
...
</div>
The issue arises when selecting a sport or garment or design, where the test-svg attribute should change to reflect the new values and load the relevant svg. Although the attribute does change, the observe function fails to trigger. This leads me to believe that it may be related to scope but I'm struggling to pinpoint the exact cause.