I've developed a unique AngularJS custom component that acts as a wrapper for a Material Design mdSelect. It allows for easy configuration of available, default, and current values through its bindings.
This component serves as an editing tool within an mdDialog, adapting its options based on the item being edited. It includes a "Next" button to move to the next item for editing. Pressing this button updates the component with new available, default, and current values, like so:
<foo-component default-value="dialog.getDefaultFoo()" current-foo="dialog.currentFoo">
</foo-component>
If no list of available values is provided, the component defaults to one value—the "default-value."
Upon selecting "Next," the values in the mdSelect change according to what's returned by dialog.getDefaultFoo(). The newly selected value becomes dialog.currentFoo.
In situations where dialog.currentFoo is null, I want the control to automatically choose the designated default value or, if none is indicated, the first available value. This is straightforward during component initialization with $onInit. However, how do we determine inside the component when the user has clicked "Next" and the available values have changed?
When the "Next" button is clicked, this.fooForm.$setPristine() is called. According to the documentation, this method affects all controls within the form. My idea was to have the custom control detect the call to $setPristine() to automatically select a default value if the new value is null. Yet, detecting this action still presents a challenge—how can the custom component know when $setPristine() is triggered on the form?
Ultimately, the custom component must identify changes in its bound values and update other values accordingly under specific conditions. Using a getter/setter approach from outside the component is a possibility, but the key dilemma remains: how does the custom component recognize modifications in its bound values?
To complicate matters further, dialog.currentFoo operates as a function recognized by my component as a getter/setter which retrieves/updates the value depending on the dialog's status. Spotting changes in this value is difficult because the function itself doesn't alter—only the value it returns shifts.
Even more complexity arises as the mdSelect is merely one element sent to dialog.currentFoo; otherwise, it isn't propagated beyond the component boundaries.
In summary, my custom component needs to ascertain whether the binding dialog.currentFoo, essentially a getter/setter function, might now yield
null</code. In such cases, the component should select a dynamic default value based on the evolving items listed internally in the <code>mdSelect$setPristine() or even resorting to hacks like forcing AngularJS to recreate the component upon external state changes.