- Summarized
I'm seeking a cleaner approach to resolving a problem related to isolate scopes. I am not fully satisfied with my current workaround and hope there is a more effective solution available.
- View the Demonstration
Check out the Demo on Plunkr. It includes a directive showcasing the issue, along with another one demonstrating a temporary fix. Adjust the input values and observe that the propagation only works for one of them.
- The Background Story
An angular directive was created containing an ng-switch. The following is the code:
angular.module('core')
.directive('otherSearchField', function() {
return {
templateUrl: 'otherSearchField.html',
restrict: 'E',
scope: {
field: '=',
placeholder: '@',
condition: '@searchWhen'
}
};
});
The template for this directive is as follows:
<section ng-switch="condition">
<div ng-switch-when="true">
<input type="text" ng-model="field" placeholder="{{placeholder}}">
<button ng-click="search()">Search</button>
</div>
<div ng-switch-default>
{{field}}
</div>
</section>
While it could potentially be rewritten using ng-if, what remains crucial is that in both scenarios, a new scope is generated by either ng-switch or ng-if.
I utilize the directive like this:
<div ng-controller="Ctrl">
<other-search-field field="query.city" placeholder="City" search-when="{{edition.city}}"></other-search-field>
</div>
- The Challenge at Hand
It's evident from the directive template that we have an input linked to "field." While this input is connected to the calling template through the = notation in the directive definition, the changes made in the input affect the field within the ng-switch's scope but do not extend beyond it.
- A Potential Fix (Not Ideal)
To address this issue, my present solution involves implementing the object notation within the directive template. This necessitates passing the encompassing object to the directive as well as specifying the property intended for modification.
<section ng-switch="condition">
<div ng-switch-when="true">
<input type="text" ng-model="fieldParent[field]" placeholder="{{placeholder}}">
<button ng-click="search()">Search</button>
</div>
<div ng-switch-default>
{{fieldParent[field]}}
</div>
</section>
Example Usage:
<my-search-field field-parent="query" field="customer" placeholder="Customer" search-when="{{edition.customer}}"></my-search-field>
This method proves successful as it employs the object notation, allowing modifications in the input to cascade upwards (as demonstrated in the linked Plunkr).
- Next Steps?
However, passing an entire object when only one property is required does not entirely satisfy me. Are there alternative approaches worth exploring?
- Note
In this instance, employing multiple ng-show could also resolve the issue since they avoid creating distinct scopes. Yet, my focus lies on addressing the broader concern highlighted here rather than solving this specific case.
Thank you for dedicating the time to read through all the details. Your efforts are much appreciated!