I was thinking about using $rootScope, I’m able to share one element from a controller to another, but I don’t how to do it depending on the item clicked.
Please I have a question @DFull ! this is working only when I click on one item, if return to the home page and I click on another item it doesn’t, I should reload the page to make it work, so it works only once each page load. so how to resolve this issue ?
you shouldn’t use $rootscope for this.
go with @encodedmirko suggestion and build a little service which just provides an array where you store your data in.
.controller('Ctlr1', function($scope, $http, $stateParams, myAwesomeNewService) {
myAwesomeNewService.call("http://domain.com/view/object.json")
.success(function (data, status, headers, config) {
/*
This callback will be called asynchronously when the response is available.
The callback was a success, get the data and sent it to the view.
*/
// Push the new values to the template.
$scope.items = data;
})
.error(function (data, status, headers, config) {
// Called asynchronously if an error occurs or server returns response with an error status.
console.log("request on failed");
});
})
.service('myAwesomeNewService', function ($rootScope, $localStorage, $http, $q) {
return {
call: function (url) {
var deferred = $q.defer();
var promise = deferred.promise;
$http({
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
method: "POST",
url: url
}).success(function (data) {
if (data) {
deferred.resolve(data);
}
else {
deferred.reject('No data available.');
}
}).error(function (data, status, headers, config) {
deferred.reject(data, status);
});
promise.success = function (fn) {
promise.then(fn);
return promise;
};
promise.error = function (fn) {
promise.then(null, fn);
return promise;
};
return promise;
}
}
})