Backport selector to component

[damianog]

The fact that a component is restricted to "E" would be useful to add the property "selector" as in angular2. In my case I have an attribute directive to order the columns of a table based on the value of a field. Another parent directive coordinate sorting and update a two-way binded variable.

When trying to convert to a component should be able to write:

        .component("tr", {
            selector: "tr['sort']",
            bindings: {
                sort: "=sort"
            },
            controller: controllers.Tr
        })

.....

        .component("th", {
            selector: "th['sortby']",
            require: {
                ngSort: "^tr"
            },            
            controller: controllers.Th,
            bindings: {
                fieldName: "@sortby"
            },

so the componets will be tied only to the elements that need it.

[gkalpak]

It's an interesting idea. I'm not sure there is a reliable way to match CSS selectors on our supported browsers (and we don't have our own HTML parser as ng2), but maybe we could support a function that would return true/false, then it would look something like this:

.component('tr', {
  matches: function ($attrs) { return $attrs.hasOwnProperty('sort'); },
  ...
})

[wesleycho]

Couldn't one delegate to querySelectorAll for matching elements, starting at the bootstrapped element? This would require quite some work though, as this is a modification that probably needs to support directives as well.

[gkalpak]

Delegate what to querySelectorAll ? Note that we are not processing directives one-by-one; we need to be able to process element one-by-one (meaning we need a way to collect all directives for a specific element and then compile it).