He buscado una pregunta similar, pero las que surgieron parecen ligeramente diferentes. Estoy tratando de cambiar el ui-sref = '' de un enlace de forma dinámica (este enlace apunta a la siguiente sección de un formulario de asistente y la siguiente sección depende de la selección realizada en la lista desplegable). Simplemente estoy tratando de establecer el atributo ui-sref dependiendo de alguna selección en un cuadro de selección. Puedo cambiar el ui-sref vinculando a un atributo de alcance que se establece cuando se realiza una selección. sin embargo, el enlace no funciona, ¿es esto posible? Gracias

  <a ui-sref="form.{{url}}" >Next Section</a>

y luego en mi controlador, configuro el parámetro url de esta manera

switch (option) {
  case 'A': {
    $scope.url = 'sectionA';
  } break;
  case 'B': {
    $scope.url = 'sectionB';
  } break;
}

Alternativamente, utilicé directivas para que funcionara generando el hipervínculo con el atributo ui-sref deseado de acuerdo con la opción seleccionada en el cuadro de selección (desplegable).

Sin embargo, esto significa que tengo que volver a crear el enlace cada vez que se selecciona una opción diferente del cuadro de selección, lo que provoca un efecto de parpadeo indeseable. Mi pregunta es la siguiente: ¿es posible cambiar el valor de ui-sref como intenté hacer arriba simplemente cambiando el valor de url en mi controlador o tengo que volver a crear todo el elemento usando una directiva cada vez que una selección se hace como he hecho a continuación? (solo mostrando esto para completar)

Seleccionar directiva de opción (esta directiva genera la directiva de enlace)

define(['app/js/modules/app', 'app/js/directives/hyperLink'], function (app) {
app.directive('selectUsage', function ($compile) {

    function createLink(scope,element) {
        var newElm = angular.element('<hyper-link></hyper-link>');
        var el = $(element).find('.navLink');
        $(el).html(newElm);
        $compile(newElm)(scope);
    }

    return {

        restrict: 'E',
        templateUrl: '/Client/app/templates/directives/select.html'

        ,link: function (scope, element, attrs) {

            createLink(scope, element);

            element.on('change', function () {
                createLink(scope,element);
            })
        }
    }
})

Directiva de hipervínculo

define(['app/js/modules/app'], function (app) {
app.directive('hyperLink', function () {

    return {
        restrict: 'E',
        templateUrl: '/Client/app/templates/directives/hyperLink.html',
        link: function (scope, element, attrs) { }
    }

})

Plantilla de hipervínculo

<div>
    <button ui-sref="form.{url}}">Next Section</button>
</div>