Check out this Pluker I created for making image swapping easier. Currently, the images swap normally when coded in the controller. However, I am interested in utilizing custom services or factories to achieve the same functionality. Below is the code snippet.
HTML
<body ng-app="myApp">
<!-- navigation bar -->
<div id="navBar">
<!-- dynamic navbar goes here -->
</div>
<!-- end of navigation bar -->
<div class="row fullWidth">
<!-- sidebar begins -->
<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 src="images/company_profile.png" alt="">
<a href="#">COMPANY PROFILE</a>
<img ng-click="myData.swapHere();subSec = !subSec" id="arrowRotate" ng-src="{{myData.images.current}}">
</li>
<li ng-show="subSec">
<img src="" alt="">
<a href="#">SERVICES</a>
</li>(more on plunker)
Angular
var myApp = angular.module("myApp", []);
myApp.service("ReverseService", function() {
// service func goes here --
this.imgSwap = function(a, b, def) {
if (def === a) {
def = b;
} else if (def === b) {
def = a;
}
}
})
myApp.controller("SideCtrl", function($scope, ReverseService) {
console.log("thomas");
$scope.myData = {};
$scope.myData.images = {
initialImage: "images/prof_arrow1.png",
finalImage: "images/prof_arrow.png",
current: "images/prof_arrow1.png"
};
$scope.myData.swapHere = function() {
ReverseService.imgSwap($scope.myData.images.initialImage, $scope.myData.images.finalImage, $scope.myData.images.current);
};
$scope.subsec = false;
$scope.bookSec = false;
});
Your help is much appreciated!