L'ouverture d'un DIV dans le code HTML comme Modale dans AngularJS

L'apprentissage de quelques AngularJS ici...

J'ai Angulaire de l'application qui se connecte à un ASP.Net WebAPI.

Je suis en train d'avoir un DIV à l'intérieur de mon HTML ouvrir une fenêtre modale.

Mon HTML se présente comme suit:

<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();
});

Fondamentalement, quand je clique sur Ajouter un Nouveau Véhicule bouton de la console dit:

ReferenceError: $ n'est pas défini

sur la ligne dans le contrôleur de là où il est censé montrer le modal:

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

Je suis un peu perdu sur la façon de résoudre ce problème.

Apprécier toute la perspicacité.

P. S. Les chargements de données amende lorsque ce mode HTML est chargé. J'ai également ajouté une console.connectez-vous dans le 

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

et qui est connecté correctement dans la console. Donc totalement perdu maintenant...

Mise à jour:
A un peu plus d'enquête. J'ai publié en Chrome console la commande:

$('#vehicleModel')

et il m'a montré la div avec l'id=vehicleModel.

OriginalL'auteur Batuta | 2014-09-16

  1. 4

    Je dirais que vous devriez probablement utiliser Angulaire UI Bootstrap pour créer vos boîtes de dialogue modales. Ici est le lien.

    Ici est une version réduite de la façon d'ouvrir une modale à l'aide Angulaire de l'INTERFACE utilisateur Bootrstrap:

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

    MODAL CONTENU

    <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>
    J'aimerais essayer ce à un certain point, mais pour l'instant, je veux comprendre pourquoi mes DIV ne s'affiche pas comme un modal.
    À l'aide de jQuery directement dans angulaire contrôleur n'est généralement pas recommandée. Si vous le faites, il est préférable de les envelopper dans une directive. Votre div ne s'affiche pas parce que vous avez probablement un espace de noms de collision. Mais si vous voulez vraiment utiliser jQuery pour créer votre div, vous pouvez regarder ceci: stackoverflow.com/questions/12967434/...
    Je crois que j'ai effectivement essayé d'utiliser AngularUI Bootstrap, mais n'a pas réussi à le faire fonctionner correctement. Voici un lien vers une question que j'ai posté à ce sujet. stackoverflow.com/questions/25857347/...
    Ajout d'une réponse à cette question. Espérons que cela fonctionne pour vous.
    je pense que c'est une meilleure approche, j'ai donc upvoted il

    OriginalL'auteur Caspar Harmer

  2. 1

    Vous êtes en essayant de récupérer votre élément jQuery. $ est réservée Angulaire. essayez d'utiliser:

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

    où 'div' est ce que votre véritable nom de la balise est, et de parcourir le DOM...

    EDIT: a partir de https://docs.angularjs.org/error/jqLite/nosel

    Afin de résoudre cette erreur, la réécriture de votre code pour utiliser uniquement le nom de la balise sélecteurs manuellement et de parcourir le DOM à l'aide de l'Api fournies par jqLite.

    Sinon, vous pouvez inclure une version complète de jQuery, qui Angulaire
    utilisera automatiquement et vous aurez tous les sélecteurs disponibles.

    Vous avez une erreur: à la Recherche des éléments via les sélecteurs n'est pas pris en charge par jqLite!
    désolé, édité.
    J'ai inclus une référence à jQuery 1.10.2 et j'ai toujours le même message d'erreur. Vraiment perplexe sur ce.

    OriginalL'auteur flybear

  3. 0

    Vous pouvez de code comme ceci: 

     //Pre-fetch an external template populated with a custom scope
var myOtherModal = $modal({scope: $scope, template: 'modal/docs/modal.demo.tpl.html', show: false});
//Show when some event occurs (use $promise property to ensure the template has been loaded)
$scope.showModal = function() {
myOtherModal.$promise.then(myOtherModal.show);
};

    OriginalL'auteur Dang