Definir dinamicamente o valor de ui-sref Angularjs

Eu procurei por uma pergunta semelhante, mas as que surgiram parecem um pouco diferentes. Eu estou tentando alterar o ui-sref = ” de um link dinamicamente (este link aponta para a próxima seção de um formulário de assistente e a próxima seção depende da seleção feita na lista suspensa). Eu estou simplesmente tentando definir o atributo ui-sref dependendo de alguma seleção em uma checkbox de seleção. Eu sou capaz de alterar o ui-sref vinculando a um atributo de escopo que é definido quando uma seleção é feita. no entanto, o link não funciona, isso é possível? obrigado

Next Section 

e, em seguida, no meu controlador, defino o parâmetro url dessa maneira

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

Alternativamente, eu usei diretivas para fazê-lo funcionar gerando o hyperlink com o atributo ui-sref desejado de acordo com a opção selecionada na checkbox de seleção (drop down).

No entanto, isso significa que eu tenho que recriar o link toda vez que uma opção diferente é selecionada na checkbox de seleção, o que causa um efeito de tremulação indesejado. A minha pergunta é esta: é possível alterar o valor do ui-sref como tentei acima, simplificando a alteração do valor de url no meu controlador ou tenho que recriar o elemento inteiro usando uma diretiva cada vez que uma seleção é feito como eu fiz abaixo? (apenas mostrando isso para completar)

Selecione a diretiva de opção (esta diretiva gera a diretiva de link)

 define(['app/js/modules/app', 'app/js/directives/hyperLink'], function (app) { app.directive('selectUsage', function ($compile) { function createLink(scope,element) { var newElm = angular.element(''); 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); }) } } }) 

Diretiva de hiperlink

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

Modelo de hiperlink

 

Parece que isso é possível depois de tudo.

Um breadcrumb no GitHub feito por um dos autores do ui-router levou-me a tentar o seguinte:

 Dynamic Link 

Então, no seu controlador:

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

Acontece que isso funciona como um encanto p / mudar os valores do escopo e tudo mais. Você pode até mesmo fazer com que a constante de string ‘state-name’ faça referência a um valor com escopo definido e que também atualizará a href na view 🙂

Existe uma plunker de trabalho . A maneira mais fácil parece ser a combinação de:

  • $state.href() (doc aqui ) e
  • ng-href (doc aqui )

Estes juntos podem ser usados ​​como:

  

Então, (seguindo este plunker ) tendo estados como estes:

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

Podemos alterar esses valores para gerar dinamicamente o href

   

Confira em ação aqui

ORIGINAL:

Há um exemplo prático de como conseguir o que precisamos. Mas não com a dinâmica ui-sref .

Como podemos verificar aqui: https://github.com/angular-ui/ui-router/issues/395

Q: [A] re atributos ui-sref dynamics não são suportados?
A: correto.

Mas podemos usar um recurso diferente do ui-router : [$state.go("statename")][5]

Então, isso poderia ser o material do controlador:

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

E aqui está o modelo HTML:

 
choose the url:
{{selected | json}}

go to selected


O exemplo de trabalho

OBSERVAÇÃO: há um link mais atualizado para a definição $ state.go , mas o mais depreciado é um pouco mais claro para mim

Dê uma olhada nesta edição # 2944 .

O ui-sref não assiste a expressão do estado, você pode usar o ui-state ui-state-params passando a variável.

   Link to page {{selectedState.name}} with myParam = {{aMyParam}}  

Também uma demonstração rápida fornecida no ingresso.

Eu consegui implementá-lo desta maneira (estou usando a variante controllerAs embora – não via $ scope).

Modelo

  

Controlador

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

Veja também a documentação para ui-sref onde você pode passar params:

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

Depois de tentar várias soluções, encontrei o problema no código angular.ui.router .

O problema vem do fato de que o método de update ui.router é acionado com o ref.state que significa que não é possível atualizar o valor da href usada quando o elemento é clicado.

Aqui estão duas soluções para resolver o problema:

Directiva personalizada

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

O HTML para usar é bem simples:

  Link  

Corrigir código ui.router:

Em angular.router.js, você encontrará a diretiva $StateRefDirective (linha 4238 para a versão 0.3).

Altere o código da diretiva para:

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

Veio responder isso para o bem 🙂

Felizmente, você não precisa usar um botão para ng-click ou usar uma function dentro de um ng-href para conseguir o que procura. Em vez de;

Você pode criar uma ui-sref $scope em seu controller e atribuir a string ui-sref nela e usá-la em sua view, como atributo ui-sref .

Como isso:

 // 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 Add Button 

Isso funciona perfeitamente para mim.

A melhor abordagem é fazer uso uiRouter's $state.go('stateName', {params}) do uiRouter's $state.go('stateName', {params}) ng-click . E desative o botão se nenhuma opção estiver selecionada.

HTML

   

Controlador

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

Estado

 $stateProvider.state('wizard', { url: '/wizard/:param1/:param2', // or '/wizard?param1&param2' templateUrl: 'wizard.html', controller: 'Controller as ctrl' }); 

isso está apenas trabalhando para mim

no controlador

 $scope.createState = 'stateName'; 

em vista

 ui-sref="{{ createState }}" 

Para gerenciar múltiplos parâmetros dynamics usando o ui-sref, aqui minha solução:

Html: (‘MyPage.html’)

  

Controlador: (‘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' }); 

Apreciar !

  

Se alguém quiser apenas definir dinamicamente os $ stateParams do ui-sref no Angularjs. Nota: no elemento inspecionar, ele ainda aparecerá como “buy ({myPairIndex: $ index})”, mas $ index será buscado nesse estado.

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

Ele retorna um object

Ou apenas algo assim:

  Link