I have a method in my ReverseService service. I am using this service in my controller. When calling it with ng-click, the issue arises where the same function is being executed for two different buttons instead of just one. Although I understand why this is happening, I am struggling to find a solution. Below is the code snippet.
HTML
<div id="sidebar" ng-controller="SideCtrl">
<!-- static sidebar content -->
<div class="large_3_custom columns">
<ul class="side-nav side_nav_custom">
<li>
<img src="images/dashboard.png" alt="">
<a href="#">DASHBOARD</a>
</li>
<li>
<img ng-src="images/company_profile.png" alt="">
<a href="#">COMPANY PROFILE</a>
<img ng-src="{{images.current}}" ng-click="swapHere();subSec = !subSec" id="arrowRotate">
</li>
<li ng-show="subSec">
<img src="" alt="">
<a href="#">SERVICES</a>
</li>
<li ng-show="subSec">
<img src="" alt="">
<a href="#">EMPLOYEES</a>
</li>
<li>
<img src="images/statistics.png" alt="">
<a href="#">STATISTICS</a>
</li>
<li>
<img src="images/reviews.png" alt="">
<a href="#">REVIEWS</a>
</li>
<li>
<img src="images/tips_advice.png" alt="">
<a href="#">TIPS & ADVICE</a>
</li>
<li>
<img src="images/deals.png" alt="">
<a href="#">DEALS</a>
</li>
<li>
<img src="images/media.png" alt="">
<a href="#">MEDIA</a>
</li>
<li>
<img src="images/price_list.png" alt="">
<a href="#">BOOKING</a>
<img ng-src="{{images.current}}" ng-click="swapHere();bookSec = !bookSec" id="arrowBook">
</li>
<li ng-show="bookSec">
<img src="" alt="">
<a href="#">CALENDAR</a>
</li>
<li>
<img src="images/market.png" alt="">
<a href="#">MARKET</a>
</li>
<li>
<img src="images/sponser_deal.png" alt="">
<a href="#">SPONSOR A DEAL</a>
</li>
<li>
<img src="images/extra_services.png" alt="">
<a href="#">EXTRA SERVICES</a>
</li>
</ul>
</div>
</div>
Angular
var myApp = angular.module("myApp", []);
myApp.service("ReverseService", function() {
// service function implementation --
this.imgSwap = function(images) {
if (images.current === images.finalImage) {
images.current = images.initialImage;
} else if (images.current === images.initialImage) {
images.current = images.finalImage;
}
};
});
myApp.controller("SideCtrl", function($scope, ReverseService) {
console.log("thomas");
$scope.myData = {};
$scope.images = {
initialImage: "images/prof_arrow1.png",
finalImage: "images/prof_arrow.png",
current: "images/prof_arrow1.png"
};
$scope.swapHere = function() {
ReverseService.imgSwap($scope.images);
};
$scope.subSec = false;
$scope.bookSec = false;
});
Check out the Plunker demo.