the passed value didn't show on my popup window using angularjs and bootstrap

Question

using angularjs and bootstrap, I am tring to edit the table row as popup window but I couldn't pass the edite fields to the window this is my code

controller.js

this.openUser = function(row) {
                                $scope.user = row;
                                var userInstance = $uibModal
                                .open({
                                    animation : $scope.animationsEnabled,
                                    templateUrl : './user_model',
                                    controller : 'userModelController',
                                    backdrop : true,
                                     windowClass: 'monitoring-modal',
                                    resolve : {
                                         row: function () {
                                              return row;
                                            }
                                    }
                                });

                            };

and this is my modal controller

angular.module('users').controller('userModelController', ['$scope', 'row',
         function($scope ,row) {
            this.row = row
        } ]);

and this is my popup window html

<div class="modal-header">
    <h3 class="modal-title">Users</h3>
</div>
<div class="modal-body">
    <table class="table table-bordered" style="height: 350px; border-collapse:collapse;">
        <thead>
            <tr class="modal-body">
                <th class="col-md-1" style="text-align: center; vertical-align: middle;"> {{ row }} </th>
                <th class="col-md-1" style="text-align: center; vertical-align: middle;"> last name </th>

        </thead>
    </table>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
    <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>

but what I get in my window is blank value

score 0 · Accepted Answer · edited May 23 '17 at 11:44

0

You have set the row on this. Try setting the row on $scope.

$scope.row = row;

I haven't used ui-bootstrap modal lately, but I don't think it supports controllerAs syntax. At least not with your current configurations.

EDIT: Turns out, it does support controllerAs syntax: https://stackoverflow.com/a/23806963/841804

And even if it does support it, you should then be binding to <controler-as-name>.row, shouldn't you?

edited May 23 '17 at 11:44

Community

1
1

answered Jul 18 '16 at 11:08

Chanthu

1,794
1
15
22

I added this line in my controller but it didn't work – Belal Othman Jul 18 '16 at 11:13
Any errors in the console? Try debugging or printing the value to console and see if it's empty or not. Maybe a quick plunkr? – Chanthu Jul 18 '16 at 11:16
no error and the problem that I don't know how to make plunkr (I am new with Java Script) – Belal Othman Jul 18 '16 at 11:18
according to this plunker http://plnkr.co/edit/Agvcc6CZFBvQQLRpQeRk?p=preview there is no need to controllerAs – Belal Othman Jul 18 '16 at 11:18
Yes, correct and that's why they put the data on `$scope` and not `this`. `$scope.entity = entity;` and NOT `this.entity = entity;` – Chanthu Jul 18 '16 at 11:21
it works when I added $scope.row = row to my usrModalController but I didn't understand why I have to add this controller while I have this value in scope in the other controller – Belal Othman Jul 18 '16 at 11:21
Good to know that your issue has been solved. It doesn't work because those scopes are no the same. ui-boootstrap creates a new scope for modal controller. – Chanthu Jul 18 '16 at 11:24

the passed value didn't show on my popup window using angularjs and bootstrap

1 Answers1