angularjs - 动态设置 ui-sref Angularjs 的值

Question

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

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

然后在我的 Controller 中，我这样设置 url 参数

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

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

但这意味着每次从选择框中选择不同的选项时我都必须重新创建链接，这会导致不良的闪烁效果。我的问题是，是否可以像我上面尝试的那样通过简单地更改 Controller 中的 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>

Answer 1

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

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

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

然后，在您的 Controller 中:

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

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