Refactoring. How to decouple Calls to Services and $scope values modification? - angularjs

Question

We are working with two models: Weeks and Days. Every Day belongs to a Week.
An we got two views: week-detail and day-detail
How could we decouple the Calls to Service and the $scope values modification?
(maybe using AngularJS Directives)
.
Week Detail View has the following template, there are listed all Days that belong to the specific Week
<!-- file 1: week-detail.tpl.html -->
<table>
<tr ng-repeat="day in weekdetail.days">
<td>
<span ng-click="toggleActive(day.id, $index)">
{{ day.active }}
</span>
</td>
</tr>
</table>
The Controller that commands this View is the following:
// file 2: week-detail.controller.js
function WeekDetailCtrl ($scope, $routeParams, Week, Days, DayToggleActive) {
this.week = Week.get({ id: $routeParams.id });
this.days = Days.query({ id: $routeParams.id });
// #param dayId: id to be processed by DayToggleActvive.toggleActive() service
// #param position: $index from ng-repeat, to modify this specific DOM element
$scope.toggleActive = function(dayId, position) {
// call to service
(DayToggleActive.toggleActive({ id: dayId }))
.$promise
.then(function(data) {
// $scope values manipulation
$scope.weekdetail.week = data;
$scope.weekdetail.days[position].active = !$scope.weekdetail.days[position].active;
});
};
}
Day Detail View has the following template:
<!-- file 3: day-detail.tpl.html -->
<div ng-click="toggleDetailActive(daydetail.day.id)">
{{ daydetail.day.active }}
</div>
The Controller that commands this View is the following:
// file 4: day-detail.controller.js
function DayDetailCtrl ($scope, $routeParams, Day, DayToggleActive) {
this.day = Day.get({ id: $routeParams.id });
this.ods = Ods.query({ id: $routeParams.id });
// #param dayId: id to be processed by DayToggleActvive.toggleActive() service
$scope.toggleDetailActive = function(dayId) {
// call to same service
(DayToggleActive.toggleActive({ id: dayId }))
.$promise
.then(function(data) {
// $scope value manipulation is different in Day Detail View
$scope.daydetail.day.active = !$scope.daydetail.day.active;
});
};
}
.
Thank you in advance for your help
UPDATE
Thanks to help of Oddman, we have proceeded with an advance
We have added a Custom Directive Tag to HTML
<!-- file 3: day-detail.tpl.html -->
<div toggleActive="daydetail.day">
{{ daydetail.day.active }}
</div>
And added the directive to module
// file 4: day-detail.controller.js
module.directive('toggleActive', toggleActive);
function toggleActive() {
return {
scope: {day: '=toggleActive'},
restrict: "A",
link: function(scope, element, attrs ) {
element.bind("click", function() {
scope.day.active = !scope.day.active;
});
}
}
}
That looks better, but... what we need is to toggle scope.day.active after successfully call to Service, so...
// file 4: day-detail.controller.js
// inject DayToggleActive service dependency
module.directive('toggleActive', ['DayToggleActive', toggleActive]);
function toggleActive(DayToggleActive) {
return {
scope: {day: '=toggleActive'},
restrict: "A",
link: function(scope, element, attrs ) {
element.bind("click", function() {
(DayToggleActive.toggleActive({ id: scope.day.id }))
.$promise
.then(function(data) {
scope.day.active = !scope.day.active;
})
.catch(function(response) {
console.log(response);
});
});
}
}
}
Previously, the reference was in controller declaration, so let's remove it
// file 4: day-detail.controller.js
function DayDetailCtrl ($scope, $routeParams, Day) {
...
NOW
Week Detail View can be refactored the same way
<!-- file 1: week-detail.tpl.html -->
<table>
<tr ng-repeat="day in weekdetail.days">
<td>
<span toggleDayActive="day">
{{ day.active }}
</span>
</td>
</tr>
</table>
And Day Detail Controller will include a similar directive to which we defined for Week Detail Controller
// file 2: week-detail.controller.js
// inject DayToggleActive service dependency
module.directive('toggleDayActive', ['DayToggleActive', toggleDayActive]);
function toggleDayActive(DayToggleActive) {
return {
scope: {day: '=toggleDayActive'},
restrict: "A",
link: function(scope, element, attrs ) {
element.bind("click", function() {
(DayToggleActive.toggleActive({ id: scope.day.id }))
.$promise
.then(function(data) {
scope.day.active = !scope.day.active;
// HOW COULD WE ACCESS PREVIUSLY REFERENCED AS $scope.weekdetail.week ?
})
.catch(function(response) {
console.log(response);
});
});
}
}
}
How could we regain access to previously referenced as $scope.weekdetail.week ?
Do we need to pass that as parameter in an way?
Is there a way to reach that $scope?

Answer 1

I would setup directives for your toggling, and just pass the day or week to that. For example:
<div toggle-week="week"></div>
Then in your directive, something like:
module.directive('toggleWeek', function() {
return {
scope: {week: '=toggleWeek'},
link: function(scope, element, attrs) {
// add your scope function here
}
};
});
You can do a similar thing for your daily toggle. Then you just can just deal with the week/day binding in your directive rather than working directly on the $scope.
Hope that helps.