Currently, I'm exploring the use of angular and bootstrap tour and I have a challenge in trying to isolate objects within their own area without storing them in the controller. My goal is to store an object in the service, which also contains functions within it. However, when these functions are invoked with "eval()", they execute within the context of the service instead of the controller where they were intended to be utilized. Specifically, the "$scope" reference has no context in the service, unlike in the controller.
Below is a snippet of the code:
var returnedObj = {
steps: [
{
element: '#newProduct',
title: 'Create Products',
placement: 'bottom',
content: 'Create new products here'
}
],
backdrop: true,
// The function that needs to interact with $scope through the controller
onShow: function (tour) {
$scope.tourDisabled = true;
$scope.filter.availability = 'all';
$scope.filter.gallery = 'Show All';
$scope.updateFilter();
}
};
I have attempted using JSON.stringify and JSON.parse, but unfortunately, they do not work with functions. Is there any way to achieve this objective?
Aside from $rootScope, are there any alternative approaches to solving this issue?