API to access to mounting element for state (uiView element in html)

[falsyvalues]

This is a:

• [ ] Bug Report
• [x] Feature Request
• [x] General Query

My version of UI-Router is: 1.0.11 ng1

Feature Request

Would be nice to have an access to list of mounting elements (uiViews) corresponding to state, possibly through existing views() API.

Code below is an example what can be achieved right now but contains some downsides (but illustrate the idea behind this):

• Search is done through all document (its not state context aware like views())
• Search is done on every invoke
• Supports only one view (How to query for a proper element using views() data?)

$transitionsProvider.onStart({
    from: 'a.*',
    to: 'a.*'
}, (transition) => {
    const fromState = transition.from();

    if (typeof fromState.template === 'string') {
        // Returns as an exmaple "my-directive" it will looks different with components case
        const elementName = getElementNameFromTemplate(fromState.template);
       // There is no way to find proper uiView element as a root
        const elementInsideSomeUiView = angular.element(document).find(elementName);
        // Do anything with element
    }
});

General Query

• [x] I have already asked my question on StackOverflow and nobody could answer the question Found this one: https://stackoverflow.com/questions/28234260/how-can-i-get-a-reference-to-the-target-element-with-ui-view-attribute-in-ui-rou

• [x] I have already reviewed the sample application for examples of common approaches

• [x] I believe my question can only be answered by the UI-Router maintainers

Described in Feature Request.

[christopherthielen]

Here's what I recommend:

• Create a ui-view directive and track when the directive is created and destroyed. Keep a reference to the directive's element. (the directive will share the same element as ui-router's ui-view)
• Register a transition hook which checks all the elements' angular.element().data('$uiView') data.

Plunker example: http://plnkr.co/edit/vPSZL8X78v8IUh4acorv?p=preview

I've also added an onSync callback to the view plugin API. I will release the new onSync api in a future release of ui-router. Plugin APIs are lower level than the rest of ui-router APIs and is more likely to change in the future. The onSync API will informs listeners of each $view.sync() event and provides the list of all active ui-view and the matching view configs (from state views block). This API may never provide an actual element as part of the api because it does not always make sense in all frameworks and environments (such as server-side rendering)

[falsyvalues]

Hi @christopherthielen thanks for looking into it. I guess example could be extended with some injectable registry of ui-views (managed via directive) which could be useful with onSync :tada:. Looking forward for onSync release.