动态设置 ui-sref Angularjs 的值 [英] Dynamically set the value of ui-sref Angularjs

问题描述

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

 <a ui-sref="form.{{url}}" >下一节</a>

然后在我的控制器中，我以这种方式设置 url 参数

开关(选项){案例A":{$scope.url = 'sectionA';} 休息;案例'B':{$scope.url = 'sectionB';} 休息;}

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

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

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

define(['app/js/modules/app', 'app/js/directives/hyperLink'], function (app) {app.directive('selectUsage', function ($compile) {函数创建链接(范围，元素){var newElm = angular.element('<hyper-link></hyper-link>');var el = $(element).find('.navLink');$(el).html(newElm);$compile(newElm)(scope);}返回 {限制:'E'，templateUrl: '/Client/app/templates/directives/select.html'，链接:功能(范围，元素，属性){创建链接(范围，元素)；element.on('change', function () {创建链接(范围，元素)；})}}})

超链接指令

define(['app/js/modules/app'], function (app) {app.directive('超链接', 函数 () {返回 {限制:'E'，templateUrl: '/Client/app/templates/directives/hyperLink.html',链接:函数(范围、元素、属性){}}})

超链接模板

<button ui-sref="form.{url}}">下一节</button>

解决方案

看来这毕竟是可以做到的.

GitHub 上的面包屑导航，作者之一ui-router 作者引导我尝试以下方法:

动态链接

然后，在您的控制器中:

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

事实证明，这就像一个魅力，改变了范围值等等.您甚至可以使状态名称"字符串常量引用一个范围值，这也将更新视图中的 href :-)

I have searched for a similar question but the ones that came up seem slightly different. I am trying to change the ui-sref='' of a link dynamically (this link points to the next section of a wizard form and the next section depends on the selection made on the dropdown list). I am simply trying to set the ui-sref attribute depending on some selection in a select box. I am able to change the ui-sref by binding to a scope attribute which is set when a selection is made. however the link does not work, is this possible at all? thanks

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

and then in my controller, I set the url parameter this way

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

Alternatively, I used directives to get it to work by generating the hyperlink with the desired ui-sref attribute according to the option selected on the select box (drop down).

Hhowever this means I have to re-create the link each time a different option is selected from the selectbox which causes an undesirable flickering effect. My question is this, is it possible to change the value of the ui-sref as I tried doing above by simpling changing the value of url in my controller or do I have to re-create the entire element using a directive each time a selection is made as I have done below? (just showing this for completeness)

Select option directive (this directive generates the link directive)

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

Hyperlink directive

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

})

Hyperlink template

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

解决方案

Looks like this is possible to do after all.

A breadcrumb on GitHub by one of the ui-router authors led me to try the following:

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

Then, in your controller:

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

Turns out, this works like a charm w/ changing scoped values and all. You can even make the 'state-name' string constant reference a scoped value and that will update the href in the view as well :-)

这篇关于动态设置 ui-sref Angularjs 的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！