ui-sref-active does not work with state that have an array as a parameter

[tommysanterre]

Given a state with param of type array

$stateProvider.state('stateA', {
    params: {
      paramA: {
        value: [],
        array: true,
        type: 'int',
       },
    },

The active class is not added on the html element when we navigate to the state

<a ui-sref-active="active" ui-sref="stateA({paramA: [1,2]})">Link</a>

[tommysanterre]

I have also tried creating a custom type. But this does not work as well

$urlMatcherFactoryProvider.type('intArray', {
  encode: (val) => {
    return val.join(',');
  },
  decode: (string) => {
    return string.split(',').map(s => parseInt(s, 10));
  },
  is: (val) => {
    return Array.isArray(val) && val.every(Number.isInteger);
  },
  pattern: /\d*(?:,\d+)*/,
  equals: (a, b) => {
    return angular.equals(a, b);
  },
});

[ZuBB]

I can confirm this issue. but I have one correction to it. ui-sref-active does not work if ui-sref has any params. see next diff

vasyl@4540s ~/work/current/atv/src/js/dashboard $ gt di
diff --git a/src/js/campaign/direct-buy/report/module/report.html b/src/js/campaign/direct-buy/report/module/report.html
index 2a823ff..a14ec69 100644
--- a/src/js/campaign/direct-buy/report/module/report.html
+++ b/src/js/campaign/direct-buy/report/module/report.html
@@ -4,11 +4,11 @@
       <div cad-column="49">
         <cad-tabs type="orange" class="hidden-print">
           <cad-tabs-item ui-sref-active="is-active"
-                         ui-sref="advancedtv.campaign.directbuy.report.pacing({campaignData: vm.data})"
+                         ui-sref="advancedtv.campaign.directbuy.report.pacing"
                          text="atv.directBuy.report.tabs.pacing_report">
           </cad-tabs-item>
           <cad-tabs-item ui-sref-active="is-active"
-                         ui-sref="advancedtv.campaign.directbuy.report.rollup({campaignData: vm.data})"
+                         ui-sref="advancedtv.campaign.directbuy.report.rollup"
                          text="atv.directBuy.report.tabs.rollup_file">
           </cad-tabs-item>
         </cad-tabs>
vasyl@4540s ~/work/current/atv/src/js/dashboard $ 

with passed params ui-sref-active does not work. without all is OK

[christopherthielen]

This is a bug in $state.includes.
This code should be updated to use typed Param comparison, not object equality

      return params ? equalForKeys(state.params.$$values(params), $stateParams, objectKeys(params)) : true;

This code does == comparison, which obviously doesn't work for arrays.

function equalForKeys(a, b, keys) {
  if (!keys) {
    keys = [];
    for (var n in a) keys.push(n); // Used instead of Object.keys() for IE8 compatibility
  }

  for (var i=0; i<keys.length; i++) {
    var k = keys[i];
    if (a[k] != b[k]) return false; // Not '===', values aren't necessarily normalized
  }
  return true;
}

[christopherthielen]

http://plnkr.co/edit/fqNUk3p0gZtDL59EjZbc?p=preview

[ZuBB]

@christopherthielen could you please post here a ping message when 0.3.2 will be released?

[ZuBB]

Hi there!

@christopherthielen do you have any news on this?

Thanks in advance

[zeusdeux]

@ZuBB Could you PR this please? It would unblock both you and I since we are both waiting on 0.3.2. Cheers!

/cc @christopherthielen

[ZuBB]

@zeusdeux I am sorry I am a bit busy right now and quite possibly for next month too. maybe after that.

[christopherthielen]

closed by 6958c24