动态设置ui-sref Angularjs的值

Question

我搜索了一个类似的问题,但出现的问题似乎略有不同.我试图动态更改链接的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>

Answer 1

毕竟看起来这是可能的.

由ui-router作者之一在GitHub上的一个痕迹导致我尝试以下方法:

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

然后,在你的控制器中:

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

事实证明,这就像一个改变范围值和所有的魅力.你甚至可以让'state-name'字符串常量引用一个范围值,这也将更新视图中的href :-)

Answer 2

有一个工作的plunker.最简单的方法似乎是使用以下组合:

• $state.href() (doc 在这里)和
• ng-href (doc 这里)

这些可以一起用作:

<a ng-href="{{$state.href(myStateName, myParams)}}">

那么,(跟随这个掠夺者)有这样的状态:

$stateProvider
  .state('home', {
      url: "/home",
      ...
  })
  .state('parent', {
      url: "/parent?param",
      ...
  })
  .state('parent.child', { 
      url: "/child",
      ...

我们可以更改这些值以动态生成href

<input ng-model="myStateName" />
<input ng-model="myParams.param" />

在这里检查它

原版的:

有一个工作示例如何实现我们所需要的.但不是动态的ui-sref.

我们可以在这里查看:https://github.com/angular-ui/ui-router/issues/395

问:[A]不支持动态ui-sref属性？
答:正确.

但我们可以使用不同的功能ui-router:[$state.go("statename")][5]

所以,这可能是控制器的东西:

$scope.items = [
  {label : 'first', url: 'first'},
  {label : 'second', url: 'second'},
  {label : 'third', url: 'third'},
];
$scope.selected = $scope.items[0];
$scope.gotoSelected = function(){
  $state.go("form." + $scope.selected.url);
};

这是HTML模板:

<div>
  choose the url:
  <select
    ng-model="selected"
    ng-options="item.label for item in items"
  ></select>

  <pre>{{selected | json}}</pre>
  <br />
  go to selected
  <button ng-click="gotoSelected()">here</button>

  <hr />
  <div ui-view=""></div>
</div>

工作实例

注意:有更多关于$ state.go定义的最新链接,但不推荐使用的链接对我来说更清楚一些

Answer 3

看看这个问题#2944.

在ui-sref不看状态表现,你可以使用ui-state和ui-state-params传递变量.

  <a data-ui-state="selectedState.state" data-ui-state-params="{'myParam':aMyParam}">
       Link to page {{selectedState.name}} with myParam = {{aMyParam}}
  </a>

还有票证中提供的快速演示.