Dynamic ui-sref in directive

[snikch]

I've written a breadcrumb directive which takes an array of crumbs, each with a name and sref property. I'm trying to bind the ui-sref directive ($StateRefDirective) to use the evaluated attribute, but it's not working. When the ui-sref directive's link function is called, the attrs.uiSref value is undefined, but immediately after the running of the function becomes available as the correct value.

angular.module('myApp').directive 'breadcrumb', ->
  scope: { crumbs: '=' }
  replace: true
  template: '
    <nav class="breadcrumbs">
      <a ui-sref="{{crumb.sref}}" ng-repeat="crumb in crumbs">{{crumb.name}}</a>
    </nav>
  '

Inside the $StateRefDirective link method, logging attrs gives

Attributes {… uiSref: undefined …}

Running the same log after a 100ms timeout gives:

Attributes {… uiSref: "apps.show({appId: crumb.app.id})" …}

Am I doing something wrong, or are dynamic ui-sref attributes not supported?

Note: Running v0.2.0

[nateabele]

[A]re dynamic ui-sref attributes not supported?

Correct.

[snikch]

Technically difficult, or just not a priority?

[nateabele]

More of an API design consideration.

[snikch]

Ah ok. Is there an official guideline as how one would implement dynamic links then? I'm guessing a function that calls the full $state.go(…), however it would have been nice to have the href tag set for when hovering over the link.

[nateabele]

Yeah, you can use $state.href() to generate the URL.

[snikch]

Cool, thanks!

[nateabele]

No worries. If there gets to be a big enough demand for this, we'll come back around and design a proper implementation, so I'll keep your notes here in mind.

[julien-lafont]

No worries. If there gets to be a big enough demand for this, we'll come back around and design a proper implementation, so I'll keep your notes here in mind.

👍

this directive was in this repository before v0.2.0, but it was not a part of the release installed with bower. I found it, used it and faced this bug. I fixed this issue for myself and thought it was no official part of ui-router.

Today - using v0.2.0 I faced the need of this feature again and I found my ui-sref.js in my git repository. Here is the code I used earlier:

$StateRefDirective.$inject = ['$state', '$interpolate'];
function $StateRefDirective($state, $interpolate) {

    function parseStateRef(ref) {
        var parsed = ref.match(/^([^(]+?)\s*(\((.*)\))?$/);
        if (!parsed || parsed.length !== 4) throw new Error("Invalid state ref '" + ref + "'");
        return { state: parsed[1], paramExpr: parsed[3] || null };
    }

    function hasToBeInterpolated(attributeValue) {
        return attributeValue.indexOf("{{") != -1
    }

    function isForm(element) {
        return element[0].nodeName === "FORM";
    }

    function buildNewHref(attributeValue, params) {
        return"/#" + $state.href(attributeValue.state, params, { lossy: true });
    }

    function setUrl(element, attr, newHref) {
        element[0][attr] = newHref;
    }

    return {
        restrict: 'A',
        priority: 1000,
        link: function (scope, element, attrs) {
            var attributeValue = attrs.uiSref;

            if (hasToBeInterpolated(attributeValue)) {
                attributeValue = $interpolate(attributeValue)(scope);
            }

            attributeValue = parseStateRef(attributeValue);

            var params = null
            var url = null;
            var attr = isForm(element) ? "action" : "href"; //, nav = true;

            var update = function (newParams) {
                if (newParams) {
                    params = newParams;
                }
                var newHref = buildNewHref(attributeValue, params);
                if (!newHref) {
                    nav = false;
                    return false;
                }
                setUrl(element, attr, newHref);
            };

            if (attributeValue.paramExpr) {
                scope.$watch(attributeValue.paramExpr, function (newParams, oldVal) {
                    if (newParams !== oldVal) {
                        update(newParams);
                    }
                }, true);
                params = scope.$eval(attributeValue.paramExpr);
            }
            update();
        }
    };
}

angular.module('ui.state').directive('uiSref', $StateRefDirective);

There could be some bugs, because I used it only once in testproject and It never got into production.

[nateabele]

@maklemenz Um, this isn't a bug. Also, that implementation doesn't even work for HTML5 mode.

@nateabele Yes, I said my code will not be production ready (or will contain bugs). It feels like a bug, because you cannot use this directive in any more complex application where you generalize things with directives. You need to resolve the url yourself with the services. For me this means I cannot use this directive in 99.9% of all my applications and need to do everything that directive is made for by hand. that feels like a bug IMHO.

[nateabele]

@maklemenz Please see my notes on #139, specifically:

I know there was some mention of a more dynamic way of referencing states. IMO that is out-of-scope for a shorthand syntax. If people want something more advanced, they can combine ng-href with $state.href().

@nateabele I see. A design decision. Personally I think ui-sref="{{stateName}}( {{stateParams}} )" is pretty ugly, but I could live with that. Ok, I will keep using the service for now.

[KayEss]

No worries. If there gets to be a big enough demand for this, we'll come back around and design a proper implementation, so I'll keep your notes here in mind.

Just wanted to say I came here looking for the exact same thing. I'll work something else out for now.