I am currently working on implementing a toggle feature in my form. The idea is that when I click one button, it should display a section with the corresponding name, and hide the other sections. However, I am facing an issue related to scope. When I do not use an isolated scope for my substeps, both substeps appear active or inactive together, which is not the desired behavior. On the other hand, if I implement an isolated scope, the isActive() function is never called.
Here is the code snippet:
<div ng-controller='SubstepCtrl'>
<button activates='CreateNewMeter'>
Create new Meter
</button>
<button activates='UseExistingMeter'>
Use Existing Meter
</button>
<div class='sub-step' substep='CreateNewMeter' ng-show='isActive(name)'>
<h1>Create New Meter</h1>
</div>
<div class='sub-step' substep='UseExistingMeter' ng-show='isActive(name)'>
<h1>Use Existing Meter</h1>
</div>
</div>
In Angular:
.controller('SubstepCtrl', function($scope) {
$scope.activeSubstepName = undefined;
$scope.isActive = function(name) {
return $scope.activeSubstepName == name;
};
})
.directive('activates', function() {
return {
link: function($scope, $element, $attrs) {
$element.on('click', function() {
$scope.activeSubstepName = $attrs.activates;
$scope.$apply();
});
}
};
})
.directive('substep', function() {
return {
link: function($scope, $element, $attrs) {
$scope.name = $attrs.substep;
}
};
});
I have found a workaround using JQuery, but I would prefer an Angular solution. Is there a way to achieve this using Angular?
The intended behavior is that clicking "Create new Meter" should display the "CreateNewMeter" substep while hiding "UseExistingMeter". It seems that the issue lies in the substep divs not creating a separate scope and instead using the parent scope, resulting in 'name' being undefined - is that correct?
If so, how can this be resolved?