Controller not calling in AngularJS

Question

I am facing problem in call to controller in child ui state router.

URL is changing but controller not call.

no console error*

Please check code:

HTML

<a style="cursor: pointer;" class="btn btn-default btn-xs"  ui-sref="interactions.details({id:n.id})">Detail</a>

Router

.state('interactions', {
            url: '/interactions',        
            data: {
                pageTitle: 'Interaction',
                IsLoginPage: false
            },
            templateUrl: '../../modules/interaction/views/interaction.html',
            controller: 'interactionCtl'
        })
        .state('interactions.details', {
            url:'/details/:id',
            data: {
                pageTitle: 'Interaction Details',
                IsLoginPage: false
            },
            templateUrl: '../../modules/interaction/views/interactionDetail.html',
            controller:'interactionCtlDetails'
        }).run(function ($rootScope, settings, $cookies, $http, $location, AuthenticationService, $state, $stateParams) {

    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams; 

});

Controller

    warApp.controller('interactionCtlDetails', ["$scope", '$rootScope','$stateParams', 'settings', 'categoryService', 'blockUI',
        function ($scope, interactionService, $rootScope, $stateParams ,settings, categoryService, blockUI) {

            var id = $stateParams.id;
console.log(id);

    });

It would be helpful for others wanting to help to have a working sample of code snippet or jsbin/jsfiddle/codepen sample. — elpddev
– elpddev, Commented Apr 2, 2017 at 4:13

ksyCho · Accepted Answer · 2017-04-02 05:02:28Z

1

Annotation array should be in sync with the parameters in the function declaration.Here annotation array is not in sync with the parameters in the function declaration.

Second parameter in your annotation array is 'interactionService' but in function, thats 'rootScope'.

Try with below controller code

warApp.controller('interactionCtlDetails', ['$scope', '$rootScope', '$stateParams', 'settings', 'categoryService', 'blockUI',
function ($scope, $rootScope, $stateParams ,settings, categoryService, blockUI) {
        var id = $stateParams.id;
        console.log(id);
});

answered Apr 2, 2017 at 5:02

ksyCho

894 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abdullah Al Noman · Accepted Answer · 2017-04-02 10:07:47Z

1

 warApp.controller('interactionCtlDetails', ["$scope", '$rootScope','$stateParams', 'settings', 'categoryService', 'blockUI',
        function ($scope, interactionService, $rootScope, $stateParams ,settings, categoryService, blockUI) {

      var id = $stateParams.id;
       console.log(id);
    });

In above code you have function ($scope, interactionService, $rootScope, $stateParams ,settings, categoryService, blockUI) where you have interactionService which you have missed in your injection section

edited Apr 2, 2017 at 10:07

answered Apr 2, 2017 at 5:51

Abdullah Al Noman

2,8784 gold badges22 silver badges37 bronze badges

Comments

Mad-D · Accepted Answer · 2017-04-02 04:24:03Z

0

Simpler example of routing, maybe you can narrow down the problem by adding one controller at a time and build the rest. Fiddle or error will help.

angular.module('myApp').config(function ($stateProvider){

    $stateProvider
        .state('form', {
        url:"/form",
            views:  {
                "listColumn": { 
                     templateUrl: "/form1.html",
                     controller:'myController1'
                  },
                "formColumn": {
                      templateUrl: "/form2.html"
                  } 
            }
        })  
});

answered Apr 2, 2017 at 4:24

Mad-D

4,70919 gold badges58 silver badges93 bronze badges

Comments

Sajeetharan · Accepted Answer · 2017-04-02 04:28:39Z

0

Definitely your controller should throw an error in console, the order of dependency parameters injected in the controller is wrong, you are missing interactionService

change it as,

warApp.controller('interactionCtlDetails', ["$scope", 'interactionService','$rootScope','$stateParams', 'settings', 'categoryService', 'blockUI',
        function ($scope, interactionService, $rootScope, $stateParams ,settings, categoryService, blockUI) {

    });

answered Apr 2, 2017 at 4:28

Sajeetharan

223k65 gold badges369 silver badges409 bronze badges

Collectives™ on Stack Overflow

Controller not calling in AngularJS

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related