动态设置 ui-sref Angularjs 的值

我搜索过类似的问题，但出现的问题似乎略有不同。 我正在尝试动态更改链接的 ui-sref='' （此链接指向向导表单的下一部分，下一部分取决于下拉列表中所做的选择）。我只是想根据选择框中的某些选择来设置 ui-sref 属性。我可以通过绑定到在进行选择时设置的范围属性来更改 ui-sref。但是链接不起作用，这可能吗？谢谢

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

然后在我的控制器中，我这样设置 url 参数

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

或者，我使用指令通过根据选择框（下拉菜单）上选择的选项生成具有所需 ui-sref 属性的超链接来使其工作。

然而，这意味着每次从选择框中选择不同的选项时我都必须重新创建链接，这会导致不良的闪烁效果。 我的问题是，是否可以像我在上面尝试的那样通过简单地更改控制器中 url 的值来更改 ui-sref 的值，或者我是否必须在每次选择时使用指令重新创建整个元素是按照我下面做的做的吗？ （只是为了完整性而展示）

选择选项指令（该指令生成链接指令）

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);
            })
        }
    }
})

超链接指令

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) { }
    }

})

超链接模板

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

看起来这毕竟是可以做到的。

面包屑GitHub一位 ui-router 作者引导我尝试以下操作：

<a ng-href="{{getLinkUrl()}}">Dynamic Link</a>

然后，在你的控制器中：

$scope.getLinkUrl = function(){
  return $state.href('state-name', {someParam: $scope.someValue});
};

事实证明，这就像改变范围值等的魅力一样。您甚至可以使“state-name”字符串常量引用一个作用域值，这也会更新视图中的 href :-)