CODEWITHSUNDEEP
angularjs
Ian
Ian

Reputation: 161

angularjs state parameters not working

I'm having an issue trying to pass a parameter object to a state using stage.go().

Here is my state definition:

.state('drillhole.ddhinttype', {
        url: '/ddhinttype',
        templateUrl: VIRTUAL_DIR_PATH + '/App/Views/drillholemanager/drillhole/tabddhinttype.html?v=' + fileVer,
        controller: 'DrillHoleDdhIntTypeController',
        params: { name: null, description: null }
    })

And here is my controller:

try {
    angular.module('centric.drillhole.manager');
} catch (e) {
    angular.module('centric.drillhole.manager', ['app.config', 'ui.router', 'kendo.directives', 'ui.bootstrap', 'ngCookies', 'centric.common', 'centric.notification', 'pascalprecht.translate', 'centric.security', 'centric.app.settings']);
}

angular.module('centric.drillhole.manager').controller('DrillHoleDdhIntTypeController', ['$scope', 'CentricUIHelper', 'NumberHelper', 'DrillHoleManagerService', 'app.config', '$stateParams',
function ($scope, uihelper, numberHelper, service, appconfig, $stateParams) {

    $scope.loading = false;

    $scope.isbusy = function () {
        return $scope.loading || $scope.$parent.loading;
    }

    var load = function () {
        var hello = $stateParams.name;
        var hello2 = $stateParams.description;

    };

    load();

}]);

And I'm calling the state like so:

$state.go('drillhole.ddhinttype', { name: tab.params.name, description: tab.params.description });

In my controller the name and description properties are always null.

Not sure what I'm missing here. Any ideas?

Upvotes: 1

Views: 1261

Answers (3)

Ian
Ian

Reputation: 161

I feel like I should post the final result. I have decided to pass the parameter in the URL so that I can re-use the same controller for several tabs which each have the same functionality but against different tables in the DB.

Here is the part of my base controller which creates the tabs (CoreLogController.js):

   service.getDrillHoleIntervalTypes()
        .success(function (res) {
            $scope.data.drillHoleIntervalTypes = res;

            for (var i = 0; i < $scope.data.drillHoleIntervalTypes.length; i++) {
                // add the tab and set it as active if we're in the correct $state
                $scope.dynamictabs.push({ heading: $scope.data.drillHoleIntervalTypes[i].Name, route: 'drillhole.ddhinttype', params: { ddhinttype: $scope.data.drillHoleIntervalTypes[i].Name }, active: ($scope.$state.params.ddhinttype == $scope.data.drillHoleIntervalTypes[i].Name) });
            }
        })
        .error(function (error) {
            uihelper.showError(error);
        });

And here is the relevant HTML portion where the tabs are shown (corelog.html):

        <tabset>
            <tab ng-repeat="t in statictabs" heading="{{t.heading}}" ui-sref="{{t.route}}" active="t.active"></tab>
            <tab ng-repeat="t in dynamictabs" heading="{{t.heading}}" ui-sref="drillhole.ddhinttype({ddhinttype: '{{t.params.ddhinttype}}'})" active="t.active"></tab>
        </tabset>

And here is where I define the state (app.js):

    .state('drillhole.ddhinttype', {
        url: '/ddhinttype/{ddhinttype}',
        templateUrl: VIRTUAL_DIR_PATH + '/App/Views/drillholemanager/drillhole/tabddhinttype.html?v=' + fileVer,
        controller: 'DrillHoleDdhIntTypeController',
        params: { ddhinttype: null }
    })

I now get access to the ddhinttype variable on each instance of the controller (DrillHoleDdhIntTypeController.js) which tells it which table to perform operations against.

Since ddhinttype is also contained the URL the user can create a bookmark which will bring them right back to the same tab even though they are dynamically generated.

Upvotes: 0

Marco Alves
Marco Alves

Reputation: 36

If you put the params in your url you will be able to access it in controller using $stateParams

.state('drillhole.ddhinttype', {
        url: '/ddhinttype/:name/:description',
        templateUrl: VIRTUAL_DIR_PATH + '/App/Views/drillholemanager/drillhole/tabddhinttype.html?v=' + fileVer,
        controller: 'DrillHoleDdhIntTypeController',
        params: { name: null, description: null }
    })

You can read more about url routing here: https://github.com/angular-ui/ui-router/wiki/url-routing

Upvotes: 1

Omar Meky
Omar Meky

Reputation: 606

Try this in the state definition:

params: { name: undefined, description: undefined }

or this:

params: ['name', 'description']

Upvotes: 0

Related Questions