Angularjs: How to pass a dynamic value to a modal?

Question

I am trying to pass a dynamic parameters to a modal by clicking a button, but some values are not in place, always returning an empty value.

here is my modal snippet:

<div id="<%handler%>" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title"><%header%></h4>
            </div>
            <div class="modal-body">
                <p><%body%></p>
                <form class="form main_grid_contact" name="orderForm">
                    <input type="hidden" name="order" value="<%orderPublic%>">
                    <div class="form-group">
                        <input class="form-control" type="text" name="fullname" placeholder="Fullname">
                    </div>
                    <div class="form-group">
                        <input class="form-control" type="text" name="telephone" placeholder="Telephone">
                    </div>
                    <div class="form-group">
                        <input class="form-control" type="email" name="pass" placeholder="E-mail">
                    </div>
                    <div class="input-group1">
                        <input type="submit" name="order" class="form-control" value="Order">
                    </div>
                </form>
            </div>
            <div class="clearfix"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger btn-block" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

I've created a directive that makes it easy to pop up the modal:

app.controller('orders.controller', function ($scope, $log) {
    $scope.header = '';
    $scope.body = '';
    $scope.footer = '';
    $scope.orderPublic = '';
    $scope.addProduct = function (orderId) {
        $scope.orderPublic = orderId;
    }
});
app.directive('modal', function () {
    return {
        restrict: 'EA',
        scope: {
            title: '=modalTitle',
            header: '=modalHeader',
            body: '=modalBody',
            footer: '=modalFooter',
            callbackbuttonleft: '&ngClickLeftButton',
            callbackbuttonright: '&ngClickRightButton',
            handler: '=lolo'
        },
        templateUrl: '/static/snippets/modal.html',
        transclude: true,
        controller: function ($scope) {
            $scope.handler = 'pop';
        },
    };
});

Here is the controller:

<div class="row" id="ads" ng-controller="orders.controller">
    <div class="col-md-4">
        <div class="card rounded">
            <div class="card-body text-center">
                <div class="ad-title m-auto">
                    <h5>Honda Accord LX</h5>
                </div>
                <a href="#<%modal1%>" ng-click="addProduct('02f73a06-163a-4d6f-8ca7-c6bac8ca7a46')" role="button" data-toggle="modal" class="ad-btn">View</a>
            </div>
        </div>
    </div>
</div>

<modal lolo="modal1" modal-body="body" modal-footer="footer" modal-header="header" data-ng-click-right-button="myRightButton()"></modal>

The modal is poping up successfully, the scope parameters are in place except the orderPublic, the hidden input is empty, even i am passing it to the function and i can see the passed value inside the console

Shrirang · Answer 1 · 2019-01-22T11:14:17.323

0

Replace <% %> with {{}} as below <input type="hidden" name="order" value="{{orderPublic}}">

or <input type="hidden" name="order" ng-model="orderPublic">

edited Jan 22 '19 at 11:14

answered Jan 22 '19 at 11:09

Shrirang

198
1
10

But i have changed the `interpolateProvider` to "<% %>", so it should work i think !!!! – swordfish Jan 22 '19 at 11:14
`ng-model = "orderPublic"` – Shrirang Jan 22 '19 at 11:14
You might want to have a look at https://stackoverflow.com/questions/20258994/bind-hidden-inputs-to-model-in-angular – Shrirang Jan 22 '19 at 11:26

score 0 · Answer 2 · answered Jan 22 '19 at 12:03

So, i solved the problem.

I just want to create another scope variable inside the directive and assign to it a random value, so it will be inside my $scope variables, then when the click happens i can change that random value to the passed parameter.

Here is the solution:

A new modal directive attribute model-order

<modal lolo="modal1" modal-order="order" modal-body="body" modal-footer="footer" modal-header="header" data-ng-click-right-button="myRightButton()"></modal> 

<script>
    app.controller('orders.controller', ['$scope', '$log', 
    function($scope, $log){
        $scope.header = '';
        $scope.body = '';
        $scope.footer = '';
        $scope.order = "XXXX-XXXX-XXXX-XXXX-XXXX";
        $scope.addProduct = function (orderId) {
            $scope.order = orderId;
        }
    }]);

    app.directive('modal', function () {
        return {
            restrict: 'EA',
            scope: {
                title: '=modalTitle',
                header: '=modalHeader',
                body: '=modalBody',
                footer: '=modalFooter',
                callbackbuttonleft: '&ngClickLeftButton',
                callbackbuttonright: '&ngClickRightButton',
                handler: '=lolo',
                order: '=modalOrder'
            },
            templateUrl: '/static/snippets/modal.html',
            transclude: true,
            controller: function ($scope) {
                $scope.handler = 'pop';
            },
        };
    });
</script>

score 0 · Answer 3 · answered Jan 22 '19 at 12:13

if you want to display the value use

 value="{{orderPublic }}"

if you need two way data binding use

ng-model="orderPublic"

below is the full code

<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="orderPublic">
<h1>You entered: {{orderPublic }}</h1>
<input name="order" value="{{orderPublic }}">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.orderPublic  = 1;
});
</script>

</body>
</html>

Angularjs: How to pass a dynamic value to a modal?

3 Answers3