Définir dynamiquement la valeur de ui-sref Angularjs

Il semble que ce soit possible de le faire après tout.

Un fil d'ariane sur GitHub par l'un des ui-router les auteurs m'ont amené à essayer le suivant:

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

Puis, dans votre contrôleur:

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

S'avère, cela fonctionne comme un charme w/modification de l'étendue des valeurs et de tous. Vous pouvez même faire état du nom de " constante de chaîne de référence d'une étendue valeur et qui mettra à jour le href de la vue ainsi 🙂

Prendre un coup d'oeil dans ce numéro #2944.

La ui-sref ne regarde pas l'état de l'expression, vous pouvez utiliser ui-state et ui-state-params de passer la variable.

  <a data-ui-state="selectedState.state" data-ui-state-params="{'myParam':aMyParam}">
       Link to page {{selectedState.name}} with myParam = {{aMyParam}}
  </a>

Aussi rapidement démo prévu dans le billet.

Après avoir essayé les différentes solutions que j'ai trouvé le problème dans le angular.ui.router code.

Le problème vient du fait que l'interface utilisateur.routeur update méthode est déclenchée avec le ref.state ce qui signifie qu'il n'est pas possible de mettre à jour la valeur de la href utilisé lorsque l'élément est cliqué.

Voici 2 solutions pour résoudre le problème:

Personnalisé Directive

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

Le code HTML pour l'utiliser c'est très simple :

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

Correction de l'interface utilisateur.routeur code :

Dans angular.router.js vous trouverez la directive $StateRefDirective (ligne 4238 pour la version 0.3).

Modifier la directive code :

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

La meilleure approche est de faire usage de uiRouter's $state.go('stateName', {params}) sur le bouton de ng-click directive. Et désactiver le bouton si aucune option n'est sélectionnée.

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>

Contrôleur

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

État

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

Pour gérer multiples dynamique params à l'aide de l'interface utilisateur-sref, voici ma solution :

Html : ('MyPage.html')

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

Contrôleur : ('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 : ('mon_état')

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

Profitez-en !

<a ng-click="{{getLinkUrl({someParam: someValue})}}">Dynamic Link</a>
$scope.getLinkUrl = function(value){
$state.go('My.State',{someParam:value});
}

Elle renvoie un objet