动态设置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属性的超链接根据在选择框上选择的选项(下拉)。

Hhowever这意味着我必须重新创建链接每次从选择框中选择不同的选项，导致不良的闪烁效果。
我的问题是这是，是否可能更改ui-sref的值，因为我试图做上面的简单更改url的值在我的控制器或者我必须重新创建整个元素使用指令每次选择是如我所做的下面？ (只是为了完整性)

选择选项指令(此指令生成链接指令)

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',attrs) { }
    }

})

超链接模板

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

有 a working plunker.最简单的方法似乎是使用组合：

> $ state.href()(doc here)and
> ng-href(doc here)

这些一起可以用作：

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

所以，(在this plunker之后)有这样的状态：

$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" />

在action here检查

原版的：

有一个工作实例how to实现我们所需要的。但不是与动态ui-sref。

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

Q: [A]re dynamic ui-sref attributes not supported?
A: Correct.

但是我们可以使用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>

工作example

注意：有更多的最新链接到$state.go定义，但已过时的一个对我来说有点更清楚

动态设置ui-sref Angularjs的值

相关推荐