How can I make ng-click work in AngularJs - angularjs

I added some ng-click events for buttons but when I try to click buttons, test() function won't fire. I did everything to fix that but I couldn't.
<div ng-controller="bilgiyarismasiCtrl" ng-repeat="x in sorular">
<div class="row text-center" style="margin: 50px 250px 50px 250px;">
<div class="col-md-12" style="padding:90px; background-color:gray; color:white;">
{{ x.SORU_ICERIGI }}
</div>
<div class="col-md-6" style="padding:50px; background-color:white;">
<button ng-click="test()" class="btn btn-primary btn-lg">{{ x.A_SIKKI }}</button>
</div>
<div class="col-md-6" style="padding:50px; background-color:white;">
<button ng-click="test()" class="btn btn-primary btn-lg">{{ x.B_SIKKI}}</button>
</div>
</div>
<br /><br /><br />
</div>
Angular code:
var app = angular.module("module", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "bilgiyarismasi.html",
controller: "bilgiyarismasiCtrl"
});
});
app.controller("bilgiyarismasiCtrl", function ($scope, $http) {
$http.get("http://localhost:53438/api/BilgiYarismasi/GetSorular")
.then(function (response) {
$scope.sorular = response.data;
});
$scope.test = function () {
console.log(1)
}
});

FYI, Your code above is not invoking controller, due to this you are not able get output by clicking on any of your buttons.
Use below code :
var ngApp = angular.module('app', []);
ngApp.controller('bilgiyarismasiCtrl',function($scope, $http){
$scope.sorular = [];
/* $http.get("http://localhost:53438/api/BilgiYarismasi/GetSorular")
.then(function (response) {
$scope.sorular = response.data;
}); */
$scope.test = function () {
console.log('test')
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="bilgiyarismasiCtrl">
<div >
<div class="row text-center" style="margin: 50px 250px 50px 250px;">
<div class="col-md-12" style="padding:90px; background-color:gray; color:white;">
{{ x.SORU_ICERIGI }}
</div>
<div class="col-md-6" style="padding:50px; background-color:white;">
<button ng-click="test()" class="btn btn-primary btn-lg">{{ 'x.A_SIKKI' }}</button>
</div>
<div class="col-md-6" style="padding:50px; background-color:white;">
<button ng-click="test()" class="btn btn-primary btn-lg">{{' x.B_SIKKI'}}</button>
</div>
</div>
<br /><br /><br />
</div>
</div>
</div>
You have not included ng-app in your template file.
I have created a demo, can you please have a look.
Hope this helps you.

Related

How to invoke a modal from a controller in angularjs / ui-bootstrap?

I am trying to display a modal (Note view) from a controller (Details controller). I have separate controllers tied to each view.
The Details view has a list of radio buttons and upon selecting a radio button, it needs to display a modal with some data and OK and Cancel buttons.
Also, I need to deselect the radio button which is selected in Details view when cancel button is clicked on the modal.
How can I wire up all this? I am trying the below code and I get internal server error upon calling note modal from Details controller.
I copied some parts from my code to show what I am trying.
Thanks for any suggestions.
Details view:
<div class="list-group-item" ng-repeat="cpo in details.detailoptions">
<div class="row">
<h4><input type="radio" name="optRadio" ng-model="$parent.selectedOption"
ng-value="{{o}}" ng-change="optionSelected()"
ng-disabled="disableOptions" /></h4>
</div>
</div>
Details controller:
appControllers.controller('detailsCtrl', ['$scope', '$uibModal',
function ($scope, $uibModal) {
$scope.selectedOption;
$scope.optionSelected = function () {
//call note modal
$uibModal.open({
templateUrl: 'notePanel',
controller: 'noteCtrl',
scope: $scope
});
}
}
]);
Note view:
<script type="text/ng-template" id="notePanel" ng-controller="noteCtrl">
<div id="noteModal" class="modal fade">
<div class="modal-dialog">
<div class="form-group">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<h4>{{Note.Note1}}</h4>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-offset-1 col-md-10">
{{Note.Note2}}
</div>
</div>
</div>
<div class="panel-footer clearfix">
<div class="row row-centered">
<div class="col-xs-3 col-thin col-centered">
<button type="submit" class="btn btn-primary btn-block" data-dismiss="modal" ng-click="OK()"><span class="glyphicon glyphicon-ok"></span> Agree</button>
</div>
<div class="col-xs-3 col-thin col-centered">
<button type="button" class="btn btn-default btn-block" ng-click="Cancel()"><span class="glyphicon glyphicon-remove"></span> Disagree</button>
</div>
</div>
</div>
</div>
</div>
</div>
</script>
Note controller:
appControllers.controller('noteCtrl', ['$scope', 'dataService',
function ($scope, service) {
$scope.Note;
$scope.OK = function () {
//close modal
}
$scope.Cancel = function () {
//deselect the option selected in Details view.
}
function init() {
service.getNote($scope.optionSelected, function (data) {
if (data) {
$scope.Note = data;
}
else {
console.log('Error getting note file');
//show error dialog
}
});
}
init();
}
]);

How do I open a modal using bootstrap in angular?

I am trying to create a simple chat room web app. I am trying to bootstrap a modal to angular to include a create new room button. I followed the documentation and followed the sample code but when I tried to run it, the modal would not open. What am I missing? Here is the template and controller.
(function() {
function ModalCtrl($uibModal, Room) {
//this.newRoom = Room.addRoom();
$uibModal.open({
templateUrl: 'app/templates/modal.html',
controller: 'ModalCtrl as $modal'
})
}
angular
.module('blocChat')
.controller('ModalCtrl', ['Room', ModalCtrl]);
})();
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Create new room</h3>
</div>
<div class="modal-body">
<p>modal body</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
<button class="btn btn-primary" ng-click="$modal.open()">New Room</button>
Try
(function() {
function ModalCtrl($uibModal, Room) {
//this.newRoom = Room.addRoom();
$scope.open=function(){
angular.element('#myModal').modal('show');
};
}
angular
.module('blocChat')
.controller('ModalCtrl', ['Room', ModalCtrl]);
})();
<div id="myModal" class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Create new room</h3>
</div>
<div class="modal-body">
<p>modal body</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
<button class="btn btn-primary" ng-click="open()">New Room</button>
$uibModal dependency needs to be injected into ModalCtrl controller, like this:
angular
.module('blocChat')
.controller('ModalCtrl', ['$uibModal', 'Room', ModalCtrl]);
where
function ModalCtrl($uibModal, Room) {
//...
}
Example
(function () {
function ModalCtrl($uibModal, Room) {
var $modal = this;
//this.newRoom = Room.addRoom();
$modal.open = function () {
$uibModal.open({
templateUrl: 'app/templates/modal.html',
controller: 'ModalCtrl as $modal'
});
};
}
angular
.module('blocChat', ['ngAnimate', 'ngSanitize', 'ui.bootstrap'])
.factory('Room', function () {
return {
addRoom: function () {
console.log('add room');
}
};
})
.controller('ModalCtrl', ['$uibModal', 'Room', ModalCtrl]);
})();
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.4.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div ng-app="blocChat" ng-controller="ModalCtrl as $modal">
<script type="text/ng-template" id="app/templates/modal.html">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Create new room</h3>
</div>
<div class="modal-body">
<p>modal body</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</script>
<button class="btn btn-primary" ng-click="$modal.open()">New Room</button>
</div>

Angularjs error when i try remove button and append a new?

I have follow.js:
'user strict';
var SaurioApp = angular.module('SaurioApp', []);
SaurioApp.controller('SearchCtrl', function($scope, $http){
$scope.followUser = function(user_id,follow_to_id){
$http.get('ajax/follow', {
params: {user_id: user_id,follow_to_id: follow_to_id}
}).success(function(data){
$scope.unfollow = '<button class="btn btn-danger" ng- click="followUser({{Auth::user()->id}},{{$user->id}})">Seguir</button>';
});
}
});
and the view in blade
<div class="row" ng-app="SaurioApp">
<div class="col-xs-12 col-sm-12 col-md-12" >
<p ng-controller="SearchCtrl" >
#{{ unfollow }}
<button class="btn btn-primary" ng-click="followUser({{Auth::user()->id}},{{$user->id}})">Follow</button>
</p>
</div>
</div>
The insert is successful, but I can't delete the "Follow" button and append the new one: "Unfollow." How can I make this work?
<div class="row" ng-app="SaurioApp">
<div class="col-xs-12 col-sm-12 col-md-12" >
<p ng-controller="SearchCtrl" >
<button ng-show='unfollow' class="btn btn-danger" ng-click="followUser({{Auth::user()->id}},{{$user->id}})">Seguir</button>
<button ng-hide='unfollow' class="btn btn-primary" ng-click="followUser({{Auth::user()->id}},{{$user->id}})">Follow</button>
</p>
</div>
</div>
Similar to what #redoc says but with two buttons, one for unfollow and one for follow
SaurioApp.controller('SearchCtrl', function($scope, $http){
$scope.followUser = function(user_id,follow_to_id){
$http.get('ajax/follow', {
params: {user_id: user_id,follow_to_id: follow_to_id}
}).success(function(data){
$scope.unfollow = true;
});
}
});
It seems as if the only changes needed to be made are the CSS class and button text so in this case instead of trying to send HTMl code through the scope just send a variable and use ng-class to make the switch. Something like this:
'user strict';
var SaurioApp = angular.module('SaurioApp', []);
SaurioApp.controller('SearchCtrl', function($scope, $http){
$scope.followUser = function(user_id,follow_to_id){
$scope.unfollow=false;
$http.get('ajax/follow', {
params: {user_id: user_id,follow_to_id: follow_to_id}
}).success(function(data){
$scope.unfollow = true;
});
}
});
<div class="row" ng-app="SaurioApp">
<div class="col-xs-12 col-sm-12 col-md-12" >
<p ng-controller="SearchCtrl" >
#{{ unfollow }}
<button ng-class="{btn-danger: unfollow=false }" ng-click="followUser({{Auth::user()->id}},{{$user->id}})">Follow</button>
</p>
</div>
</div>
You can also change the button text dynamically with something like this:
<button value="{{(unfollow=false)? 'Follow' : 'Seguir'}}" ng-class="{btn-danger: unfollow=false }" ng-click="followUser({{Auth::user()->id}},{{$user->id}})"></button>
I guess the point being there is no need to actually recreate the HTML code just change the elements.

Closing all open Bootstrap modals in AngularJS?

I have created a modal that opens another modal. I want to use the second modal as a confirmation box to close the first one. I cant get it to close both modals when I click ok on the confirmation box (the second modal).
Tree.html:
<script type="text/ng-template" id="tree_item_renderer.html">
<div class="bracket-match" ng-class="match.tier == 1 ? 'bracket-match-final' : ''">
<p ng-show="match.tier == 1" class="finale-title">Finale</p>
<div class="match-content">
<div class="player-div">
<div class="bracket-player-1 bracket-player-1-tier-{{tierCount+1-match.tier}}">
<input class="input-player-1 input-player-name form-control" type="text" ng-model="match.player1" placeholder="Deltager 1">
</div>
</div>
<div class="player-div border-bottom">
<div class="bracket-player-2">
<input class="input-player-2 input-player-name form-control" type="text" ng-model="match.player2" placeholder="Deltager 2">
</div>
</div>
</div>
<div ng-show="match.tier == 1 && showthirdplace && tierCount >= 2" class="third-place" ng-model="thirdplace">
<p class="finale-title">3. plads</p>
<div class="match-content">
<div class="player-div">
<div class="bracket-player-1 bracket-player-1-tier-{{tierCount+1-match.tier}}">
<input class="input-player-1 input-player-name form-control" type="text" ng-model="match.player1" placeholder="Deltager 1">
</div>
</div>
<div class="player-div border-bottom">
<div class="bracket-player-2">
<input class="input-player-2 input-player-name form-control" type="text" ng-model="match.player2" placeholder="Deltager 2">
</div>
</div>
</div>
</div>
</div>
<div class="bracket-column">
<div ng-repeat="match in match.previousMatches" ng-include="'tree_item_renderer.html'" />
</div>
</script>
<script type="text/ng-template" id="tournament-tree.html">
<div class="row modal-footer-btns">
<button class="btn btn-primary" ng-click="ok()">GEM</button>
<button class="btn btn-warning btn-xs" ng-click="openAlertBox()" type="button" data-dismiss="modal">LUK, uden at gemme</button>
</div>
<div class="row" style="margin-bottom:15px;">
<a ng-click="addMatchTier()" class="btn btn-primary"><i class="glyphicon glyphicon-plus"></i></a>
<a ng-click="removeMatchTier()" ng-class="tierCount > 1 ? 'btn btn-primary' : 'btn btn-default'"><i class="glyphicon glyphicon-minus"></i></a><br />
</div>
<div class="row tournament-tree">
<div ng-repeat="match in finalMatch">
</div>
<div class="bracket-column">
<div ng-repeat="match in finalMatch" ng-include="'tree_item_renderer.html'"></div>
</div>
</div>
</script>
<script type="text/ng-template" id="openAlertBox.html">
<div class="modal-header">
<h3 class="modal-title"></h3>
</div>
<div class="modal-body"> </div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">Ja</button>
<button class="btn btn-warning" ng-click="cancel()">Annuller</button>
</div>
</script>
Categories.html:
<div class="row">
<div class="modal-header">
<h3 class="modal-title"></h3>
</div>
</div>
<div ng-controller="CategoriesController">
<a ng-click="add()" class="btn btn-tree btn-primary" style="margin-top:15px;">Tilføj hovedkategori</a>
<p ng-repeat="data in nodes" ng-include="'category_item_renderer.html'"></p>
<ng-include src="'Modules/TournamentTree/Tree.html'"></ng-include>
</div>
<script type="text/ng-template" id="category_item_renderer.html">
<div class="category-style">
<div class="push-cat-btn">
<a ng-click="add(data)" class="btn btn-primary btn-sm"><i class="glyphicon glyphicon glyphicon-plus"></i></a>
<a ng-hide="data.nodes.push()" ng-click="openTournamentTree(data)" class="btn btn-info btn-xs">Turnering</a>
</div>
</div>
<p class="push" ng-repeat="data in data.nodes" ng-include="'category_item_renderer.html'"></p>
</script>
<script type="text/ng-template" id="TournamentTreeModal.html">
<div class="modal-header">
<h3 class="modal-title"></h3>
</div>
<div class="modal-body">
<div class="include-tree" ng-include="'tournament-tree.html'"></div>
</div>
<div class="modal-footer">
</div>
</script>
TreeController.js:
angular.module('tournamentTree', ['ui.bootstrap']);
angular.module('tournamentTree').controller("TreeController", ['$scope', '$modal', '$modalInstance', 'guidGenerator', function ($scope, $modal, $modalInstance, guidGenerator) {
$scope.openAlertBox = function () {
var alertBoxInstance = $modal.open({
templateUrl: 'openAlertBox.html',
controller: 'TreeController',
scope: $scope,
size: 'xs',
resolve: {
}
});
};
$scope.ok = function () {
$scope.close();
$scope.$parent.close();
}
$scope.cancel = function () {
$scope.close();
$scope.$parent.dismiss('cancel');
};
categoriController.js:
angular.module('tournamentCategories').controller("CategoriesController",
['$scope', '$modal', 'guidGenerator', 'eventBus', domainName + "Service", 'TournamentCategoryModelFactory',
function ($scope, $modal, guidGenerator, eventBus, domainService, modelFactory) {
$scope.openTournamentTree = function () {
var modalInstance = $modal.open({
templateUrl: 'TournamentTreeModal.html',
controller: 'TreeController',
scope: $scope,
size: 'wide-90',
backdrop: 'static',
keyboard: false,
resolve: {
}
});
modalInstance.result.then(function (selectedItem) {
//$scope.selected = selectedItem;
}, function () {
//$log.info('Modal dismissed at: ' + new Date());
});
};
}]);
You can use $modalStack from ui.bootstrap to close all instances of $modalInstance
$modalStack.dismissAll(reason);
This is how i got it working in my project without using any factory or additional code.
//hide any open bootstrap modals
angular.element('.inmodal').hide();
I have a timeout function that emits logout as $rootScope.$emit('logout'); and the listener in my service is as follows:
$rootScope.$on('logout', function () {
//hide any open bootstrap modals
angular.element('.inmodal').hide();
//do something else here
});
If you want to hide any other modals such as angular material dialog ($mdDialog) & sweet alert dialog's use angular.element('.modal-dialog').hide(); & angular.element('.sweet-alert').hide();
I don't know if this is the right approach , but it works for me.

Opening a DIV in the HTML as Modal in AngularJS

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">×</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>
<a data-ng-click="edit(vehicle)" href=""><span class="glyphicon glyphicon-edit"></span>Edit</a>
<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.
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>
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.
You can code like this:
// 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);
};

Resources