Opening a DIV in the HTML as Modal in AngularJS

Question

Learning some AngularJS here...

I have an Angular application which connects to an ASP.Net WebAPI.

I am trying to have a DIV inside my HTML open as a modal window.

My HTML looks as follows:

<div class="container" style="padding-top:20px;">
    <div ng-app="vehicleApp" data-ng-controller="testingController" class="container">
        <div ng-show="error" class="alert alert-danger alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <p>{{ error }}</p>
        </div>

        <div class="modal fade" id="vehicleModel" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
                        <h4 class="modal-title" id="myModalLabel" ng-hide="editMode">Add vehicle</h4>
                        <h4 class="modal-title" id="myModalLabel" ng-show="editMode">Edit vehicle: {{ vehicle.Id }}</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form" name="addvehicleform">
                            <div class="form-group">
                                <label for="title" class="col-sm-3 control-label">vehicle Name</label>
                                <div class="col-sm-7">
                                    <input type="text" data-ng-model="vehicle.Name" class="form-control" id="vehiclename" placeholder="vehicle Name" required title="Enter your vehicle Name" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="title" class="col-sm-3 control-label">Identification Account</label>
                                <div class="col-sm-7">
                                    <input type="number" data-ng-model="vehicle.vehicleIdentificationAccountId" class="form-control" id="vehicleIdentificationAccountId" placeholder="vehicle Identification Account" required title="Enter your Identification Account" />
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-3 col-sm-7">
                                    <span data-ng-hide="editMode">
                                        <input type="submit" value="Add" ng-disabled="addvehicleform.$invalid" data-ng-click="add()" class="btn btn-primary normal-button" />
                                    </span>
                                    <span data-ng-show="editMode">
                                        <input type="submit" value="Update" ng-disabled="addvehicleform.$invalid" data-ng-click="update()" class="btn btn-primary normal-button" />
                                    </span>
                                    <input type="button" value="Cancel" data-ng-click="cancel()" class="btn btn-primary" />
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <h1>Vehicle List</h1>
        <p><a data-ng-click="showadd()" href="javascript:;" class="btn btn-primary">Add New vehicle</a></p>
        <table class="table table-striped table-bordered table-hover table-condensed">
            <thead>
                <tr>
                    <th>Vehicle ID</th>
                    <th>Name</th>
                    <th>Identification Account</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr data-ng-hide="agencies || agencies.length > 0">
                    <td colspan="4">
                        <div class="text-center text-warning">
                            <strong>No Agencies Retrieved</strong>
                        </div>
                    </td>
                </tr>

                <tr data-ng-repeat="vehicle in agencies">
                    <td>{{vehicle.Id}}</td>
                    <td>{{vehicle.Name}}</td>
                    <td>{{vehicle.vehicleIdentificationAccountId}}</td>
                    <td>
                        <a data-ng-click="get(vehicle)" href=""><span class="glyphicon glyphicon-open"></span>View</a>
                        &nbsp;
                        <a data-ng-click="edit(vehicle)" href=""><span class="glyphicon glyphicon-edit"></span>Edit</a>
                        &nbsp;
                        <a data-ng-click="showConfirm(vehicle)" href=""><span class="glyphicon glyphicon-remove-circle"></span>Delete</a>
                    </td>
                </tr>
            </tbody>
        </table>

        <hr />

        <div class="modal fade" id="viewModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
                        <h4 class="modal-title" id="myModalLabel">View vehicle Detail</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form" name="viewuser">
                            <div class="form-group">
                                <label for="ID" class="col-sm-3 control-label">ID</label>
                                <div class="col-sm-7">
                                    {{vehicle.Id}}
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="Name" class="col-sm-3 control-label">Name</label>
                                <div class="col-sm-7">
                                    {{vehicle.Name}}
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="vehicleIdentificationAccountId" class="col-sm-3 control-label">Identification Account</label>
                                <div class="col-sm-7">
                                    {{vehicle.vehicleIdentificationAccountId}}
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
                        <h4 class="modal-title" id="myModalLabel">Confirm</h4>
                    </div>
                    <div class="modal-body">
                        Are you sure you want to delete vehicle: {{ vehicle.Name}}?
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-warning" data-ng-click="delete()" style="width:100px;">Ok</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal" style="width:100px;">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

testingController.js

'use strict';

app.controller('testingController', function ($scope, testingDataService, $modal) {
    $scope.vehicles = [];
    $scope.vehicle = null;
    $scope.editMode = false;

    // Get vehicle
    $scope.get = function () {
        $scope.vehicle = this.vehicle;
        $('#viewModal').modal('show');
    };

    //get all vehicles
    $scope.getAll = function () {
        testingDataService.getvehicleList().success(function (data) {
            $scope.vehicles = data;
        }).error(function (data) {
            $scope.error = "An Error has occured while Loading vehicles! " + data.ExceptionMessage;
        });
    };

    // add vehicle
    $scope.add = function () {
        var currentvehicle = this.vehicle;
        if (currentvehicle != null && currentvehicle.Name != null && currentvehicle.vehicleIdentificationAccountId!= null) {
            testingDataService.addvehicle(currentvehicle).success(function (data) {
                $scope.addMode = false;
                currentvehicle = data;
                $scope.vehicles.push(currentvehicle);

                //reset form
                $scope.vehicle = null;

                $('#vehicleModel').modal('hide');
            }).error(function (data) {
                $scope.error = "An Error has occured while Adding vehicle! " + data.ExceptionMessage;
            });
        }
    };

    //edit vehicle
    $scope.edit = function () {
        $scope.vehicle = this.vehicle;
        $scope.editMode = true;
        $('#vehicleModel').modal('show');
    };

    //update vehicle
    $scope.update = function () {
        var currentvehicle = this.vehicle;

        testingDataService.updatevehicle(currentvehicle).success(function (data) {
            currentvehicle.editMode = false;

            $('#vehicleModel').modal('hide');
        }).error(function (data) {
            $scope.error = "An Error has occured while Updating vehicle! " + data.ExceptionMessage;
        });
    };

    // delete 
    $scope.delete = function () {
        currentvehicle = $scope.vehicle;
        testingDataService.deletevehicle(currentvehicle).success(function (data) {
            $('#confirmModal').modal('hide');
            $scope.vehicles.pop(currentvehicle);

        }).error(function (data) {
            $scope.error = "An Error has occured while Deleting vehicle! " + data.ExceptionMessage;

            $('#confirmModal').modal('hide');
        });
    };

    //Modal popup events
    $scope.showadd = function () {
        $scope.vehicle = null;
        $scope.editMode = false;
        $('#vehicleModel').modal({ backdrop: 'static' });
        $('#vehicleModel').modal('show');
    };

    $scope.showedit = function () {
        $('#vehicleModel').modal({ backdrop: 'static' });
        $('#vehicleModel').modal('show');
    };

    $scope.showConfirm = function (data) {
        $scope.vehicle = data;
        $('#confirmModal').modal('show');
    };

    $scope.cancel = function () {
        $scope.vehicle = null;
        $('#vehicleModel').modal('hide');
    }

    // initialize your users data
    $scope.getAll();
});

Basically when I click on the Add New Vehicle button, the console says:

ReferenceError: $ is not defined

on the line in the controller where it is supposed to show the modal:

$('#vehicleModel').modal({ backdrop: 'static' });

I am a bit lost on how to resolve this.

Appreciate any insight.

P.S. The data loads fine when this HTML view is loaded up. I also added a console.log inside the

$scope.showadd = function (){
  console.log('Test');
};

and that is logged properly in the console. So totally lost right now...

Update: Did a little more investigation. I issued in Chrome console the command:

$('#vehicleModel')

and it showed me the div with the id=vehicleModel.

Answer 1

I would argue that you should probably be using Angular UI Bootstrap to create your modal dialogs. Here is the link.

Here is a cut down version of how to open a modal using Angular UI Bootrstrap:

$scope.open = function (vehicle) {

  var modalInstance = $modal.open({
    templateUrl: 'myModalContent.html',
    resolve: {
      items: function () {
        return $scope.items;
      }
    }
  });

};

MODAL CONTENT

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">Modal!</h3>
    </div>
    <div class="modal-body">
        <div >Body</div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="$close('awesome')">OK</button>
        <button class="btn btn-warning" ng-click="$dismiss('nah')">Cancel</button>
    </div>
</script>

HTML

<a data-ng-click="open(vehicle)" href=""><span class="glyphicon glyphicon-open"></span>View</a>

Answer 2

You're trying to grab your element the jQuery way. $ is reserved in Angular. try using:

angular.element('div').modal({ backdrop: 'static' });

where 'div' is whatever your actual tag name is, and traverse the DOM for it...

EDIT: from https://docs.angularjs.org/error/jqLite/nosel

In order to resolve this error, rewrite your code to only use tag name selectors and manually traverse the DOM using the APIs provided by jqLite.

Alternatively, you can include a full version of jQuery, which Angular will automatically use and that will make all selectors available.