Динамически установить значение ui-sref Angularjs

Ответ 1

Существует рабочий плункер. Самый простой способ состоит в использовании комбинации:

• $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

Q: [A] re динамические атрибуты ui-sref не поддерживаются?
A: Правильно.

Но мы можем использовать другую особенность 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, но устаревшая версия для меня немного понятна.

Ответ 2

Похоже, это возможно сделать в конце концов.

Патч на GitHub одним из авторов ui-router заставил меня попробовать следующее:

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

Затем в вашем контроллере:

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

Оказывается, это работает как шарм с изменением значений области и всего. Вы даже можете сделать ссылку на константу 'state-name' скорректированным значением, а также обновить href в представлении: -)

Ответ 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>

Кроме того, в билету добавлена ​​операционная версия .

Ответ 4

Мне удалось реализовать его таким образом (я использую вариант 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

Ответ 5

После тестирования различных решений я обнаружил проблему в коде angular.ui.router.

Проблема возникает из-за того, что метод ui.router update запускается с помощью ref.state, что означает, что невозможно обновить значение href, используемого при щелчке элемента.

Вот 2 решения проблемы:

Пользовательская директива

    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 (строка 4238 для версии 0.3).

Измените код директивы на:

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

Ответ 6

Пришло время ответить на это:)

К счастью, вам не нужно использовать кнопку для 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>

Это отлично работает для меня.

Ответ 7

Лучшим подходом является использование директивы uiRouter $state.go('stateName', {params}) в кнопке 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'
});

Ответ 8

это просто работает для меня

в контроллере

$scope.createState = 'stateName';

в поле зрения

ui-sref="{{ createState }}"

Ответ 9

Для управления несколькими динамическими параметрами с помощью 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'
          });

Наслаждайтесь!

Ответ 10

<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>

Если кто-то хочет динамически установить $stateParams из ui-sref в Angularjs. Примечание. В элементе проверки он все равно будет отображаться как "buy ({myPairIndex: $index)", но в этом состоянии будет выбран индекс $.

Ответ 11

Или просто что-то вроде этого:

<a ui-sref="{{ condition ? 'stateA' : 'stateB'}}">
  Link
</a>