Currently, I am developing a directive that I plan to share for others to use and provide feedback on. However, I have encountered a significant issue that has left me confused as to whether it is stemming from my controller code or the directive itself.
The problem arises when I pass a variable to the directive using '=' in the isolate scope. If I pass the variable as a child object of another object, everything works perfectly in every scenario. Yet, when I pass it as a top-level variable, it only functions correctly in one case; any modifications made by the directive are reflected in the parent scope, while in the other case, the changes are not visible in the parent scope.
In the successful case, I do not define the variable before sending it to the directive. The variable is then altered within the directive and displays properly in the parent scope.
In the unsuccessful case, the variable is defined prior to being sent to the directive, but none of the updates made in the directive are propagated to the parent scope.
In both scenarios, I experimented with predefining and removing initial definitions of the variable passed to the directive. In the working case, the functionality remained intact, whereas in the non-working case, no progress was achieved.
This issue with a '=' scoped variable failing to update based on changes in the directive is perplexing to me, as I have not encountered this situation before.
Unfortunately, I am unable to provide a functional example to showcase. While I placed the code in a plnkr for review by a colleague, you can inspect all my code to identify any potential errors. Despite my attempt to create a functional demonstration, it involves an API, extensive supporting code, and simplifying it may resolve the problem without shedding light on the underlying issue. Regrettably, Stack Overflow restricts me from linking plnkrs unless I include code directly here.
Essentially, I have a custom directive:
<combobox data="dataList" value="result"></combobox>
Data can be supplied as an array of strings or objects formatted like:
{ 'value': 'car_3', 'display': 'BMW' }In the first case, the 'result' variable reflects the data set by the directive, yet in the second case, it remains unchanged (retaining its initial value).
http://plnkr.co/edit/hUCuZuBu9BUbdwD0V6AO
Within the plnkr, main.js includes my directive, and each case file demonstrates how the directive is implemented in the HTML. There may be extraneous code present, as I have been diligently debugging this issue...