Unable to navigate using ui-sref or $state.go in initial directive execution

Question

Unable to navigate using ui-sref or $state.go in initial directive execution

There seems to be an issue with my ng-repeat on a directive where I'm passing in 3 pieces of information. The directive includes a button that is supposed to pass that information on to another view using params like this:

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

Oddly enough, all the buttons for the cards (which are essentially the directives) work properly, except for the one at index 0. For some reason, the button at index 0 fails to trigger a ui-sref or a $state.go. I even tried setting it up with an ng-click and encountered a strange outcome where the console log successfully displayed the correct data, but the $state.go with the params did not execute.

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

In an attempt to troubleshoot, I noticed that removing the index and the list from the params allowed the ui-sref or $state.go to work for the first element again. However, this caused issues in the subsequent view as it lacked the necessary information.

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

Below is the ng-repeat (written in Jade):

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

Here is the button with the ng-click event

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

And here is the $scope function defined:

$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 assistance with this dilemma would be greatly appreciated.

javascript angularjs angularjs-directive angular-ui-router

Answer 1

Answer №1

One issue that was brought up by @KevinF was that index 0 was mistakenly being considered a false value. To fix this issue, I made a simple adjustment to this specific line of code:

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

changed to:

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

Additionally, within the directive, I simply reassigned it to itself using parseInt($index)

Answer 2

One issue that was brought up by @KevinF was that index 0 was mistakenly being considered a false value. To fix this issue, I made a simple adjustment to this specific line of code:

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

changed to:

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

Additionally, within the directive, I simply reassigned it to itself using parseInt($index)

Answer 3

Answer №2

Check out my Plunkr example. It seems to be functioning fine with index 0, so I'm not certain if the issue lies with the index variable. Can you spot any differences in my code aside from the filtering? I suspect that the filtering could be causing the problem.

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

Answer 4

Check out my Plunkr example. It seems to be functioning fine with index 0, so I'm not certain if the issue lies with the index variable. Can you spot any differences in my code aside from the filtering? I suspect that the filtering could be causing the problem.

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

Unable to navigate using ui-sref or $state.go in initial directive execution

Answer №1

Answer №2

Similar questions

Utilizing the classList property with elements that are hidden from view

I encountered a problem with iteration where the results appeared perfectly fine, but upon rendering at the component level, the same field loaded with the last object instead

JSON data converted into an adjacency list

How can serial numbers be sorted using a JavaScript If Statement based on 2 criteria?

Modifying the input field value in React

using angularjs to dynamically apply css styles

Finding the variance in the given situation is as simple as following these steps

Managing environment variables in a production server with Webpack post continuous integration can be done in a couple of ways

DxDataGrid: Implementing a comprehensive validation system for multiple edit fields

Working with nested arrays in Mongoose/Javascript: Adding an Object to an Array within another Array

Prevent pinch zoom in webkit (or electron)

Displaying Bootstrap alert after a successful jQuery AJAX call

The Next.js developer encounters an issue where the build fails due to a ReferenceError on a client component, stating that "window

Two objects intersecting in space

How can I incorporate eventData when using .bind() for the "keydown" event type?

Adding parameters to a URL is a common practice

Having trouble retrieving data from a web API with complex parameters

Discover the steps to convert an image to base64 while circumventing the restrictions of the same-origin policy

Unexpected behavior involving the onchange event, input validation, and the enter key

Internet Explorer 11 is not interested in giving attention to a disabled element