isolate objects from each other, angularjs - angularjs

Question

In my application, I can view, create and update items on a server.
When my page loads, I get items from the server and puts them in an array, I get the ID and Title for each item.
This array is displayed in a table, and when an title in the table is clicked, I get all attributes for that item with that ID from the server, and displays them for the user.
In my controller I have this:
$scope.currentItem = ({
title: '',
id: '',
description: ''
});
So, when Viewing and item I would set currentItem like this:
// function to get item
$scope.currentItem = ({
title: item.Title,
id: item.Id,
description: item.Description
});
Each item also has actions attached to it, so when I view an Item,
I also get that items related actions, these actions is stored in an array:
// function to get Actions
$scope.actionsArray = Actions;
In my real application I have many more objects, and several arrays, this is just an example.
But when I am done viewing or creating an item, how should I clear these arrays and objects, so that if I choose to
view or create another item, I won't have attributes from the previous item in this one?
Right now I have a function like this:
$scope.clearItems = function() {
$scope.currentItem = ({
title: '',
id: '',
description: ''
});
$scope.actionsArray = [];
};
I call this function after create, update, and viewing of an item.
But I still feel as if these different items are not isolated from each other, like in some rare case scenario that their attributes can get mixed up, if I choose to update, create and read a lot of items without refreshing the page, which is what I want to achieve.
So my question in short, how can I achieve 'object isolation' in angular?

Answer 1

You can isolate each item in a directive and then isolate the directive scope.
It's pretty easy to do it in angular.
You have an array of item objects in your main controller :
$scope.items = [{id:1,title:'title',description:'desc'},...];
$scope.aFunction = function(a,b){return a+b};
Main HTML file
<my-item data="item" func='aFunction' ng-repeat="item in items"></my-item>
Then create a directive
app.directive('myItem',function(){
return{
restrict:'E',
scope:{ //This is what makes your directive scope isolated
data:'=', //Think of each attribute as a pipe for data
func:'&'
},
template:'<p>item {{data.id}} : {{data.title}} -> {{data.description}}</p>',
controller:function($scope){
// here you can you $scope.data
// that contain a reference to your item
// and the scope is isolated from the others
// so there is no mixup concerns
// you can also use $scope.func as a function
// in your private scope
}
};
});
you can now manipule each item separately and also manage them all together by doing manipulation on the $scope.items variable in the main controller.
EDIT :
This is important to know : When you're using $scope.datain your isolated scope each attribute of data is like a direct reference to the item attributes.
Within your isolated scope you MUST only modify $scope.data attribute and never directly alter $scope.data or you will create a local and isolated copy of your item and will break the reference.
For example, you want to pass a boolean to your isolated scope then modify it from the isolated scope :
This is in your main controller
$scope.boolean = true;
$scope.anotherBoolean = {value:true};
this is your HTML file
<my-item bool="boolean" anotherbool="anotherBoolean"></my-item>
And in your directive
app.directive('myItem',function(){
return{
restrict:'E',
scope:{
bool:'=',
anotherbool:'='
},
controller:function($scope){
//this will break the reference and create a local isolated copy of $scope.bool
$scope.bool = false;
//this will not
$scope.anotherbool.value = false
}
};
});