Separate templates on themes

[dimirc]

As discussed on #8 I created a separate folder for theme "select2" with css and all related templates

Right now I'm using some clases to 'flag' some elements:

• ui-select-search Search input
• ui-select-choices location to transclude <choices>
• ui-select-match location to transclude <match>

[dimirc]

@ProLoser :

You are going in the reverse direction of angular convention by storing state in classes and using those classes in > your javascript. Instead, code the templates to be ng-class and use a $scope variable to control this information. > This will further allow us to abstract out select2 specific code.

Don't know if the comment still applies with current changes and the used of specific ui-select-* clasess to help access those elements later?

[ProLoser]

Don't use attributes to pass information between directives. Place a controller property on uiSelect, and then use require: '^uiSelect' on the children directives. The object references will be the same, so anything you attach as a property of the controller function/object will be accessible through the injected controller on children.

Only catch might be I'm not 100% what the earliest phase you can access the controller (compile > controller > link vs controller > compile > link, etc)

[dimirc]

That was the approach I wanted initially, but I cannot access the parent controller from template function at child directive, so the only way I could was like this.

[ProLoser]

Hmmm... I might suggest just using a plain string and rethinking it later. I don't think that something like this should be toggled arbitrarily because people do not want to pass a theme parameter in their DOM. The only time you WOULD is if you want a specific instance to look a little different, but in that scenario it SHOULD be something they're capable of doing with the transclusion.

TL;DR:

I recommend dumbing down our code and just making this a string (can be based off uiSelectConfig)

[dimirc]

Seams there's a bug:
Sometimes choices.tpl.html template is downloaded AFTER select.tpl.html, when this happens the choices list and the main directive are never plug together, so choices are never shown. I guess we could solve this by specifying priorities to the directives (I'll need to check this)

[dimirc]

@ProLoser I don't feel right having third party css on the src folder as committed on 5bac9f3. Maybe we should only mention those css (select2, selectize, etc) from README and explain user how to get the resource directly from the third party repo? Also at some point we could have our own default theme.

[ProLoser]

@dimirc ideally we want to be able to merge ui-typeahead into this project. DO you think you could add a demo for that too? That to me is an important goal because I don't want to have 3 separate plugins anymore.

[dimirc]

@ProLoser what do you mean with "merge ui-typeahead" and what will the demo be about?

[ProLoser]

Add a theme so that we can demonstrate that you can use ui-select instead of ui-typeahead. It should behave and look almost the same.

I want to remove ui-typeahead from ui-bootstrap and remove ui-select2 so that we can all merge efforts.

[dimirc]

I did some refactor with changes that seam like a better approach, the main modifications are:

• Create controller at uiSelect directive to expose API to other directives
• Use controllerAs attribute from directive so it can be referenced at the directive template
• Instead of using `transcludeFn from compile function (DEPRECATED), use the transclude function that is passed to the link function instead.
• Remove dependency to ui-utils/ui-keypress as discussed on Collect scope methods such as $scope.up() and $scope.down() into 1 object #9 and do the bindings at choices directive (seams like the more related place)
• Fix the bug that prevented child directives to get transcluded to main directive if were uncompile at time of replacement
• Only ask for collection at data attribute of ui-select directive, instead of full repeat_expression, since we need to have a fixed loop variable (item), this way we can be safe to refer to item in ng-click="uiSelectCtrl.select(item)" at choices.tpl.html
• Simplify choices template by setting ng-click, ng-mouseenter and ng-repeat at DOM template from compile function instead of template
• Added initial test using ngHtml2JsPreprocessor

[dimirc]

@ProLoser what's your idea about removing all third party css (selec2, selectize, etc) from src folder and list them at README. We could explain user how to get these files directly from the third party repo.

[ProLoser]

I'm not opposed to that. Are you saying that the instructions would also show you how to specify the proper html?

[dimirc]

@ProLoser what do you think about merging the changes on this PR to master and branch from there for next changes?

[ProLoser]

@dimirc you don't need my permission, you call the shots. The branch looks good to me.

[dimirc]

@ProLoser ok, good... lets go crazy then 👍

[steffenmllr]

+1

[ProLoser]

PS: I mean't the branch looks good to merge to me.