Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

autocomplete: support transclude #5768

Closed
videege opened this issue Nov 16, 2015 · 5 comments
Closed

autocomplete: support transclude #5768

videege opened this issue Nov 16, 2015 · 5 comments

Comments

@videege
Copy link

videege commented Nov 16, 2015

Somewhat related to #4495.

I have a custom directive that wraps an autocomplete component - I would like to support the ng-messages directive for my component, but it appears that the autocomplete requires the element for the messages div to be inside the < md-autocomplete > element:

 <md-autocomplete flex required
        md-input-name="autocompleteField"
        md-input-minlength="2"
        md-input-maxlength="18"
        md-no-cache="ctrl.noCache"
        md-selected-item="ctrl.selectedItem"
        md-search-text="ctrl.searchText"
        md-items="item in ctrl.querySearch(ctrl.searchText)"
        md-item-text="item.display"
        md-floating-label="Favorite state">
      <md-item-template>
        <span md-highlight-text="ctrl.searchText">{{item.display}}</span>
      </md-item-template>
      <div ng-messages="searchForm.autocompleteField.$error" ng-if="searchForm.autocompleteField.$touched">
        <div ng-message="required">You <b>must</b> have a favorite state.</div>
        <div ng-message="minlength">Your entry is not long enough.</div>
        <div ng-message="maxlength">Your entry is too long.</div>
      </div>
    </md-autocomplete>

It seems the best way for me to support ng-messages on my custom wrapper directive would be to just support transclusion for the ng-messages component, for example:

<person-lookup person="vm.person" required="true">
      <div ng-messages="form.person.$error">
           <div ng-message="required">You must search for a person.</div>
      </div>
 </person-lookup>

However, I get an error because the autocomplete directive doesn't support transclusion. Is it possible to get a change enabling this? I know it's kind of an edge case, but it would definitely improve the extensibility of the component.

@videege
Copy link
Author

videege commented Nov 16, 2015

Nevermind, I was able to achieve this using the link function.

@videege videege closed this as completed Nov 16, 2015
@binzma
Copy link

binzma commented May 19, 2016

I have the same requirement.. how did you implement it using the link function?

@angular-tools
Copy link

Hi,
I'm also stuck at the same thing.. Can you please paste the code to transclude html for md-autocomplete?

thanks!

@jammed343
Copy link

@binzma
This solves the issue too:
http://stackoverflow.com/questions/38127720/wrapping-md-tabs-in-a-directive-gives-an-orphan-ngtransclude-directive-error

@michalklym
Copy link

@videege can you elaborate on link function ?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants