Angularjs Master Detail with $stateProvider does not work

Question

I have tried what was helped in: UI Router load detail page from a list page

and I encountered a problem as the code I implemented was different overall.

Here I have the config.js:

.state('app.projects', {
        url: "/projects",
        templateUrl: "views/projects.html",
        data: { pageTitle: 'Projects' },
        controller: 'ProjectCtrl'
    })
.state('app.project_detail', {
        url: "/project_detail",
        view: {
            'project_detail':{
            templateUrl: 'views/project_detail.html',
            controller: 'ProjectDetailCtrl'
            }
        },
        data: { pageTitle: 'Project detail' }
    })

and I have the project (MASTER) html:

<td class="project-actions">
    <a ui-sref="app.project_detail/({project_id:1})" class="btn btn-white btn-sm"><i class="fa fa-folder"></i> View </a>
</td>

and the project_detail (DETAIL)

<h2> {{project_data.project_id}}</h2>

and finally the controller.js:

function ProjectCtrl($scope, $http, $timeout, $state, $stateParams) {

$http.get('../crud/projects_read.php').then(function(response){
    $scope.projects = response.data;
});

};

function ProjectDetailCtrl($scope, $http, $timeout, $state, $stateParams) {

    $scope.project_data = $scope.projects[$stateParams.project_id]

};

I think I have all set in proper manner, but the UI-SREF does not work and I think the data does not seem to be passed from the Project --> Project Detail in the controller.js file.

Could anyone help me? I am stuck and have been trying almost whole day with different examples (can't even count!).

Thank you in advance!

score 1 · Accepted Answer · answered Aug 09 '17 at 09:18

1

You have mistakes at two places

Change your ui-sref as mentioned by @Gaurav

<a ui-sref="app.project_detail({project_id: 1})">

You are not telling your state that there will be a parameter :project_id

 .state('app.project_detail', {
        url: "/project_detail/:project_id",
        view: {
            'project_detail':{
            templateUrl: 'views/project_detail.html',
            controller: 'ProjectDetailCtrl'
            }
        },
        data: { pageTitle: 'Project detail' }
    })'

answered Aug 09 '17 at 09:18

Vivz

6,625
2
17
33

Thank you so much for your comments! Now I understand how to use it. :) But, the "project_detail.html" is NOT being brought to the view. Only empty contents are shown. Do you know why? – Jay Aug 09 '17 at 14:05
Did you access it like
from your index file? Check https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views for more info on how to use views – Vivz Aug 09 '17 at 14:27
Thank you, Vivz. I have actually acknowledged the concept you mentioned above. However, due to the other stuff, the UI-VIEW is not possible. – Jay Aug 09 '17 at 15:19
In the meantime, I realized that the $scope.project_data = $scope.projects[$stateParams.project_id] is giving me a headache. It is the data coming from the SQL. Do you have any idea what is wrong? – Jay Aug 09 '17 at 15:20
I found out this through the console: TypeError: Cannot read property '1' of undefined at new ProjectDetailCtrl. I will take a look at it close to figure out what is wrong with it. Still, your support is really appreciated. :) – Jay Aug 09 '17 at 16:20
Try to create a plunker with the same problem. – Vivz Aug 09 '17 at 18:15
1

Vivz, I solved the problem. $scope.project_data = $scope.projects[$stateParams.project_id] received no data so I removed ProjectDetailCtrl function and collapsed with ProjectCtrl where it has the $scope.projects data received. Thank you for your advice!!! – Jay Aug 10 '17 at 03:48
Glad that u figured it out :) – Vivz Aug 10 '17 at 04:28

score 0 · Answer 2 · answered Aug 09 '17 at 09:10

0

Make your ui-sref like this:

<a ui-sref="app.project_detail({project_id: 1})">

answered Aug 09 '17 at 09:10

Gaurav Srivastava

3,232
3
16
36

Thank you for your advice. I will keep that in mind. :) – Jay Aug 09 '17 at 14:06

Angularjs Master Detail with $stateProvider does not work

2 Answers2