动态设置ui-sref Angularjs的值

78

我已经搜索了类似的问题，但是出现的问题似乎略有不同。我正在尝试动态更改链接的ui-sref =''（此链接指向向导表单的下一部分，下一部分取决于下拉列表上的选择）。我只是试图根据选择框中的某些选择来设置ui-sref属性。我可以通过绑定到在进行选择时设置的scope属性来更改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>
angularjs  angular-ui  angular-ui-router 
— 用户名
source
— TheDmi

Answers:

68

看起来这毕竟是可能的。

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

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

然后，在您的控制器中：

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

事实证明，这与更改作用域值和所有作用类似。您甚至可以使'state-name'字符串常量引用一个范围值，这也将更新视图中的href :-)

— 乌鸦
source
1
最干净的解决方案-值得一提的是“与路由器库无关”。
— Radek Anuszewski
1
这会强制每个摘要周期处理getLinkUrl（），这非常频繁。将console.log粘贴在getLinkUrl（）中，然后只需在页面上移动鼠标，然后观察日志爆炸。并不是说这种方法行不通，只是一团糟。
— Suamere
2
这是3年前用Angular 1.4编写的解决方案。那时，使用那个版本的Angular是实现所需功能的唯一可行选择。只是批评和否定答案，甚至不愿给出其他解决方案（如果有），也无济于事。
— RavenHursT
1
它绝对有帮助。它向未来的观众暗示这可能不是最好的解决方案，因此他们应该将目光投向其他地方。该评论没有任何“非建设性的”。如果有什么不合情理的事情，那就是您的回应，抨击用户进行有效的批评（并假设事实不明朗，例如与否决票相关的评论）。
— 科迪·格雷
1
@FabioPicheli的答案确实提供了更新的本机解决方案，请确保将其签出。
— phazei
61

有一个工作的傻瓜。最简单的方法似乎是使用以下组合：

这些一起可以用作：

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

因此，（跟随这个pl声器）具有以下状态：

$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定义的最新链接，但不推荐使用的链接对我来说更清楚

— 拉迪姆·科勒
source
1
恕我直言，这不能完全实现所需的行为。ui-sref实际上会在初始化ui-sref指令时设置锚标记的href属性。我通常对动态控制的锚标记执行以下操作： <a ui-sref="{{scopedStateName}}( { 'some-state-param': '{{scopedParamValue}}' })">My Dynamic Link</a> 显然，此方法的唯一问题是ui-sref不会监视作用域变量的更改，因此href在后续值更改时不会更改。AFAIK，ui-sref不支持此功能。
— RavenHursT 2015年
经过更多的研究，我认为我找到了一种方法来完成动态生成的href属性，该属性引用带有状态参数的状态。请在下面查看我的答案。
— RavenHursT 2015年
在使用ng-href时如何避免硬页面刷新？我目前对此解决方案有疑问，因为ng-href不使用ui-routers$state.go()方法。
— 安德烈（Andre）2015年
27

看看这个问题＃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>

票证中还提供了一个快速演示。

— 法比奥·皮切利（Fabio Picheli）
source
1
大。它不需要额外的逻辑，并且还支持ui-sref-active
— 朱莉娅
2

我设法以这种方式实现它（尽管我正在使用controllerAs变体-而不是通过$ scope）。

模板

<button ui-sref="main({ i18n: '{{ ctrlAs.locale }}' })">Home</button>

控制者

var vm = this;
vm.locale = 'en'; // or whatever dynamic value you prepare

另请参阅ui-sref可以传递参数的文档：

https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref

— 密码
source
不，button行为与相同a，该指令实际上href在编译时在按钮上创建了一个属性，但从不对其进行更新。并且单击按钮将始终转到href而不是更新的值的状态ui-sref
— Jens
2

在尝试了各种解决方案之后，我在angular.ui.router代码中发现了问题。

问题来自以下事实：使用update触发ui.router方法，ref.state这意味着href单击元素时无法更新used的值。

这里有两种解决问题的方法：

自定义指令

    module.directive('dynamicSref', function () {
    return {
        restrict: 'A',
        scope: {
            state: '@dynamicSref',
            params: '=?dynamicSrefParams'
        },
        link: function ($scope, $element) {
            var updateHref = function () {
                if ($scope.state) {
                    var href = $rootScope.$state.href($scope.state, $scope.params);
                    $element.attr('href', href);
                }
            };

            $scope.$watch('state', function (newValue, oldValue) {
                if (newValue !== oldValue) {
                    updateHref();
                }
            });

            $scope.$watch('params', function (newValue, oldValue) {
                if (newValue !== oldValue) {
                    updateHref();
                }
            });

            updateHref();
        }
    };
});

使用它的HTML非常简单： 

<a  dynamic-sref="home.mystate"
    dynamic-sref-params="{ param1 : scopeParam }">
    Link
</a>

修复ui.router代码：

在angular.router.js中，您将找到指令$StateRefDirective（版本0.3的行4238）。

将指令代码更改为：

function $StateRefDirective($state, $timeout) {
    return {
        restrict: 'A',
        require: ['?^uiSrefActive', '?^uiSrefActiveEq'],
        link: function (scope, element, attrs, uiSrefActive) {
            var ref = parseStateRef(attrs.uiSref, $state.current.name);
            var def = { state: ref.state, href: null, params: null };
            var type = getTypeInfo(element);
            var active = uiSrefActive[1] || uiSrefActive[0];
            var unlinkInfoFn = null;
            var hookFn;

            def.options = extend(defaultOpts(element, $state), attrs.uiSrefOpts ? scope.$eval(attrs.uiSrefOpts) : {});

            var update = function (val) {
                if (val) def.params = angular.copy(val);
                def.href = $state.href(ref.state, def.params, def.options);

                if (unlinkInfoFn) unlinkInfoFn();
                if (active) unlinkInfoFn = active.$$addStateInfo(ref.state, def.params);
                if (def.href !== null) attrs.$set(type.attr, def.href);
            };

            if (ref.paramExpr) {
                scope.$watch(ref.paramExpr, function (val) { if (val !== def.params) update(val); }, true);
                def.params = angular.copy(scope.$eval(ref.paramExpr));
            }

            // START CUSTOM CODE : Ability to have a 2 way binding on ui-sref directive
            if (typeof attrs.uiSrefDynamic !== "undefined") {
                attrs.$observe('uiSref', function (val) {
                    update(val);

                    if (val) {
                        var state = val.split('(')[0];
                        def.state = state;

                        $(element).attr('href', $state.href(def.state, def.params, def.options));
                    }
                });
            }
            // END OF CUSTOM CODE

            update();

            if (!type.clickable) return;
            hookFn = clickHook(element, $state, $timeout, type, function () { return def; });
            element.bind("click", hookFn);
            scope.$on('$destroy', function () {
                element.unbind("click", hookFn);
            });
        }
    };
}
— 林维
source
2
除非您创建自己的叉子，否则angular-ui-router我建议不要这样做。您的同事可能会尝试更新它并使其繁荣起来，没人知道错误来自何处。
— 拉斐尔·赫斯科维奇
1

来回答这个问题:)

幸运的是，您无需使用ng-click按钮，也无需使用ng-href内部的函数即可实现所需的功能。代替;

您可以$scope在控制器中创建一个var，然后ui-sref在其中分配字符串并在视图中将其用作ui-sref属性。

像这样：

// Controller.js

// if you have nasted states, change the index [0] as needed.
// I'm getting the first level state after the root by index [0].
// You can get the child by index [1], and grandchild by [2]
// (if the current state is a child or grandchild, of course).
var page = $state.current.name.split('.')[0];
$scope.goToAddState = page + ".add";


// View.html
<a ui-sref="{{goToAddState}}">Add Button</a>

这对我来说非常合适。

— 过滤器
source
1
我曾尝试你的方法，我可以看到ui-sref，但href不是generated.Any建议
— Arepalli Praveenkumar
我在回答中的任何地方都没有提到“ href”。那有什么关系？
— ilter 2015年
1
ui-sref是一个指令，如果提供的状态具有url（但显然没有），则它会在元素上设置href属性。
— askmike 2015年
2
@ilter第一次起作用，但是没有任何两种方式的绑定-范围更改时，链接不会更新。
— 奔
1
我只能为自己说话，但就我而言，这是因为答案不适用于该问题。下拉列表更改后，您将不再具有有效的链接。
— 乔什·加格农
1

最好的方法是利用uiRouter's $state.go('stateName', {params})on button的ng-click指令。如果未选择任何选项，请禁用该按钮。

的HTML

<select ng-model="selected" ng-options="option as option.text for option in options"></select>
<button ng-disabled="!selected" type="button" ng-click="ctrl.next()">Next</button>

控制者

function Controller($scope, $state){
    this.options = [{
        text: 'Option One',
        state: 'app.one',
        params: {
            param1: 'a',
            param2: 'b'
        }
    },{
        text: 'Option Two',
        state: 'app.two',
        params: {
            param1: 'c',
            param2: 'd'
        }
    },{
        text: 'Option Three',
        state: 'app.three',
        params: {
            param1: 'e',
            param2: 'f'
        }
    }];

    this.next = function(){
        if(scope.selected){
            $state.go($scope.selected.state, $scope.selected.params || {});
        }
    };
}

州

$stateProvider.state('wizard', {
    url: '/wizard/:param1/:param2', // or '/wizard?param1&param2'
    templateUrl: 'wizard.html',
    controller: 'Controller as ctrl'
});
— 瑞安格尔斯
source
1
这不适用于ui-sref-active或ui-sref-active-eq
— KFE
0

这只是为我工作

在控制器中

$scope.createState = 'stateName';

鉴于

ui-sref="{{ createState }}"
— 阿布·艾米什
source
4
如@ben在其他答案上所指出的：这是第一次使用，但是没有任何两种方式的绑定-范围更改时，链接不会更新
— Jens
0

为了使用ui-sref管理多个动态参数，这是我的解决方案：

HTML：（ 'MyPage.html'）

<button type="button" ui-sref="myState(configParams())">

控制器：（ 'MyCtrl'）

.controller('MyCtrl', function ($scope) {
  $scope.params = {};
  $scope.configParams = function() {
    $scope.params.param1 = 'something';
    $scope.params.param2 = 'oh again?';
    $scope.params.param3 = 'yes more and more!';
    //etc ...

    return $scope.params;
  };
}

stateProvider：（ 'myState'）

 $stateProvider
          .state('myState', {
            url: '/name/subname?param1&param2&param3',
            templateUrl: 'MyPage.html',
            controller: 'MyCtrl'
          });

请享用 ！

— Emidomenge
source
它给了我一个错误，指出无法从当前状态导航到myState
— Mani
@Mani您正在使用ui-router吗？有可能看到您的代码吗？
— Emidomenge
是的，我正在使用ui-router。<ion-item class =“ accordion-item” ng-repeat =“ item in group.items” ng-show =“ isGroupShown（group）” ui-sref =“ {{item.state}}” ui-sref-active =“ iactive”> {{item.title}} </ ion-item>
— 玛尼
尝试 ui-sref="item.state"
— Emidomenge
它仅与花括号一起使用。对不起。我在其他地方犯了一个错误。抱歉。
— 玛尼
0 
<ul class="dropdown-menu">
  <li ng-repeat="myPair in vm.Pairs track by $index">
     <a ui-sref="buy({myPairIndex:$index})"> 
          <span class="hidden-sm">{{myPair.pair}}</span>
     </a>
  </li>
</ul>

如果有人只想在Angularjs中动态设置ui-sref的$ stateParams。注意：在inspect元素中，它仍将显示为“ buy（{myPairIndex：$ index}）”，但在该状态下将获取$ index。

— 瑞安·奥古斯丁（Ryan Augustine）
source
0 
<a ng-click="{{getLinkUrl({someParam: someValue})}}">Dynamic Link</a>

$scope.getLinkUrl = function(value){
  $state.go('My.State',{someParam:value});

}

它返回一个对象

— bklups
source
-1

或者只是这样：

<a ui-sref="{{ condition ? 'stateA' : 'stateB'}}">
  Link
</a>
— 卡伦斯
source
3
正如@ben在其他答案上所指出的：这是第一次使用，但是没有任何两种方式的绑定-范围更改时，链接不会更新
— Jens
我想这个方法，但couldnot使其wirk任何建议或
— Aswin
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.