When the user entered a number beyond the stock level, the browser was
correcting that to the max number which is very helpful. But Angular was
setting the model to undefined which removes the item from the cart.
Deactivating Angular's max behaviour let's us set the value ourselves
which is then used in the cart.
If the user entered an invalid quantity, Angular set the model to
undefined and we removed the input field to show the add button. That
makes it impossible for a user to see what the maximum quantity to enter
would be. For example:
- The variant has a stock level of 5.
- The user enters 7.
- Angular sets it to undefined.
- The input field disappears.
- The user is startled and doesn't know how to proceed.
But now we hide the input only if it's deliberately set to zero.
The user can now type anything into the quantity field and some of it
may not be valid. These safe guards ensure that the buttons still work
even if the quantity is undefined or out of range.
Angular guards against the value being out of range but that has other
side-effects. We want to be able to de-activate some of Angular's
behaviour.
Here we need to build a really dynamic structure on the page like "Results for: <search-term> in <filter1> or <filter2>" and the styling on each of the words needs to be a bit different, specifically the filter terms need to be differently styled to the join words like "in" and "or". We have to generate those bits on the Angular side, but they also have to be wrapped in HTML in a specific way.
$sce.trustAsHtml() marks the injected HTML as "safe" (in relation to security issues like XSS). In this case the injected content doesn't involve any user-defined data, so it should be fine.
The login modal changes the URL to `#/login` which interfers with our
shop pages. In order to show the right shop page, we need to know which
pages are valid and where we have been before we clicked on Login.
The broadcasting of notifications didn't update properly and I couldn't
find a way to listen to $location updates. I replaced the three
intertwined directives with one controller and a bit more HTML code. Now
we have only one scope that listens to $location and all browser actions
like the back button is reflected in the page.
As nice side-effect, the menu links have now the right destination so
that you can copy the link and paste it into another browser window.
40 lines less code.
Angular controller data was being partially preserved when switching back and forth between tab templates, causing the ProductsCtrl to hold duplicate datasets when it is re-initialized after going from the shop tab to another tab, then back again.
