In my AngularJS app, I generally pass data using the $rootScope. In the various states, I manipulate pull them into $scope when necessary. But since $scope has prototypical inheritance, I suppose this is just for readability and not much else. In my app, there are the following variables...
$rootScope.list // object
$rootScope.list.items // array
$rootScope.additions // array
$rootScope.cart // object
$rootScope.cart.items // array
Before I begin, this is generally laid out in pseudocode. So if it's not correct, that's okay. I'm looking for a conceptual understanding.
At first, the cart is empty. You look at list.items and copy individual list items into the cart.items array. This works great, until we start talking about duplicate items with unique additions.
Say, I wanted to have 2 of the same item, except one item has different additions (cart items have a quantity property, not list items).
$rootScope.cart.items = [
{
name: 'listItem1',
quantity: 3,
additions: ['addition1']
}, {
name: 'listItem2',
quantity: 1,
additions: ['addition2']
}, {
name: 'listItem1', // same as cart.items[1], but additions has diff values
quantity: 1,
additions: ['addition1','addition2']
}];
Firstly, AngularJS complained because there were duplicates in my ng-repeater. I resolved that issue by appending track by $index in the ng-repeat directive. It was also the first red flag I saw that told me I was doing something wrong.
My first idea was to create a temporary cartItem, arbitrarily add its additions, then push it onto $rootScope.cart.items[]. But when it's time to push the 3rd cart item onto the cart, which is another copy of the 1st list item, it overwrites the additions[] of the first cart item. So, $rootScope.cart.items looks like this:
$rootScope.cart.items = [
{
name: 'listItem1',
quantity: 3,
additions: ['addition1','addition2']
}, {
name: 'listItem2',
quantity: 1,
additions: ['addition2']
}, {
name: 'listItem1', // same as cart.items[1], but additions has diff values
quantity: 1,
additions: ['addition1','addition2']
}];
From this result, it's ostensibly pass-by-reference when it comes to copying $rootScope variables from one place to another.
So, my next thought was to try using a directive with an isolate scope. But I realized soon enough that my logic was faulty. While an isolate scope would give me one-way data-binding, it wasn't in the direction I was hoping for. The scope parent to the directive would still be able to set values.
What I would ideally like to do is arbitrarily add list.items to cart.items. But any cart items that come from the same list item, I would like to be unbound from each other. Thus, additions in one copy can be different from additions in another copy. What would be the best way to achieve this? I have a feeling it might have been a poor decision to use $rootScope to pass data between states in my app, though it is the fastest way I have found.
Aucun commentaire:
Enregistrer un commentaire