ui-sref or $state.go not working on first directive

2
votes

I have an ng-repeat on a directive where I'm passing in 3 pieces of information. The directive has a button where I pass that information on to another view using params as such: 

ui-sref='profiles.show({userId:profile._id, index:index, list:list})

The problem I have is that the buttons for all of the cards (the cards are the directives) worked properly, except for the one at index 0. The button won't perform a ui-sref or a $state.go. I tried having it with an ng-click and console logging all the params and the console log works displaying the correct data, but the $state.go with the params is not triggering.

$state.go('profiles.show', {userId: profile._id, index: index, list: list})

Also, if I remove the index and the list from the params, the ui-sref or $state.go for the first element works again, but in the next view I don't get the necessary information anymore.

Here is the state config for profiles.show

.state('profiles.show', {url: '/{userId}', params: { index: null, list: null }, templateUrl:'/views/profiles/show/show.html', controller: 'ProfilesShowController'})

And here is the ng-repeat (I'm using Jade):

.text-capitalize(al-card, ng-repeat='profile in profiles | filter:searchBar track by $index', profile='profile', index='$index', list='profiles')

This is the button with the ng-click

button.btn.btn-default(ng-click='goToProfile(profile, index, list)') Learn More

And the $scope function: 

$scope.goToProfile = function(profile, index, list) {
  console.log(profile);
  console.log(index);
  console.log(list);
  $state.go('profiles.show', {userId: profile._id, index: index, list: list});
};

Any help with this?

2
javascriptangularjsangularjs-directiveangular-ui-router
Can you post the state config for profiles.show please? - Kevin F
also your ng-repeat string - Ronnie
I added the state config @KevinF - Jose Zamudio
Also added the ng-repeat string @Ronnie - Jose Zamudio
Can you post the part of the ng-repeat where you are calling profiles.show? I'm wondering if its taking 0 as a falsy value since you're defaulting it to null and treating the two as the same thing - Kevin F

2 Answers

1
votes

The problem (as @KevinF mentioned) was that index 0 was being taken as a falsy value, to solve it I just modified this line:

.text-capitalize(al-card, ng-repeat='profile in profiles | filter:searchBar track by $index', profile='profile', index='$index', list='profiles')

to:

.text-capitalize(al-card, ng-repeat='profile in profiles | filter:searchBar track by $index', profile='profile', index='$index.toString()', list='profiles')

and in the directive I just reassign it to itself with parseInt($index)

0
votes

I made a plunkr here, it seems to work with index 0, so I'm not sure if the issue is the index. Do you see anything different in mine other than the filtering? I think the filtering might be part of the issue

http://plnkr.co/edit/lhU8A3rhUR0JLw5KCNQM

<!DOCTYPE html>
<html ng-app="Test">

  <head>
    <script data-require="angular.js@~1.4.0-rc.2" data-semver="1.4.0-rc.2" src="https://code.angularjs.org/1.4.0-rc.2/angular.js"></script>
    <script data-require="ui-router@*" data-semver="0.2.15" src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ui-view></div>
  </body>

</html>
-------------------------------------------
<div ng-controller="SelectProfile">
  <button ng-repeat="profile in profiles track by $index" 
  ui-sref="profile({userId: profile.userId, index: $index})">
    {{ profile.userId }}
  </button>
</div>
----------------------------------------------
<div ng-controller="Profile">
  {{ profile.userId }}
  <br>
  {{ profile.index }}
</div>

<a ui-sref="home">home</a>
-----------------------------------------------
(function(){
  angular.module('Test', ['ui.router']);

  angular.module('Test')
    .run(function($rootScope, $state, $stateParams){
      $rootScope.$state = $state;
      $rootScope.$stateParams = $stateParams;
    });

  angular.module('Test')
    .config(function($stateProvider, $urlRouterProvider){
      $urlRouterProvider.otherwise('/');

      $stateProvider
            .state('home', {
                url: '/',
                templateUrl: 'home.html'
            })
            .state('profile', {
              url: '/:userId',
              params: {
                index: null,
                list: null
              },
              templateUrl: 'profile.html'
            });
    });

  angular.module('Test')
    .controller('SelectProfile', function($scope){
      $scope.profiles = [
        {userId: 1},
        {userId: 2},
        {userId: 3}
      ];
    });

  angular.module('Test')
    .controller('Profile', function($scope, $rootScope){
      $scope.profile = {
        userId: $rootScope.$stateParams.userId,
        index: $rootScope.$stateParams.index
      };
    });
})();