I'm listing my schedule entries, now I'm trying to display a modal when clicking on edit for a specific entry. My goal is to be able to edit the values of my entries. But first, can't get the modal to even display
See my plunker or code below
html
<div class="container" ng-app="appUserSchedule">
<div ng-controller="CtrlUserSchedule" >
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">User Schedule</div>
<div class="panel-body">
<div ng-cloak style="max-width:400px;">
<header>
<h3>User schedule</h3>
</header>
<ul>
<li ng-repeat="x in userscheds">{{x.week_day}} {{x.time_start}}-{{x.time_end}}
<span ng-click="showModal($index)" style="cursor:pointer;">Edit</span>
<span ng-click="removeItem($index)" style="cursor:pointer;">Delete</span>
</li>
</ul>
<div>
<div>
<div>
<input placeholder="Add user schedule entry here" ng-model="addMe">
</div>
<div>
<button ng-click="addItem()">Add</button>
</div>
</div>
<p>{{errortext}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="modalContent.html" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Edit</h4>
</div>
<div class="modal-body">
<timepicker ng-model="dt1" hour-step="1" minute-step="15" show-meridian="true"></timepicker>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div> <!-- ng-controller -->
</div> <!-- ng-app -->
js
var app = angular.module("appUserSchedule", []);
app.controller("CtrlUserSchedule", function($scope,$http,$location) {
$http.get('userschedule.json').success(function(data, status, headers, config) {
$scope.userscheds = data.userschedules;
console.log(data);
}).error(function(data, status, headers, config) {
console.log("No data found..");
});
$scope.addItem = function () {
$scope.errortext = "";
if (!$scope.addMe) {return;}
if ($scope.userscheds.indexOf($scope.addMe) == -1) {
$scope.userscheds.push($scope.addMe);
} else {
$scope.errortext = "The item is already in your list.";
}
}
$scope.removeItem = function (x) {
$scope.errortext = "";
$scope.userscheds.splice(x, 1);
}
$scope.showModal = function (action, x) {
var modalInstance;
modalInstance = $modal.open({
templateUrl: 'modalContent.html',
controller: 'CtrlUserSchedule',
scope: $scope
});
// This code for later
// Save User Schedule Entry after making a change, then close modal
saveUserScheduleEntry = function(event) {
$http.put('').success(function(eventsuccess){
}).error(function(err){
/* do something with errors */
});
modalInstance.close();
};
// This code for later
// Close modal
closeUserScheduleEntry = function(event) {
$http.put('').success(function(eventsuccess){
}).error(function(err){
/* do something with errors */
});
modalInstance.close();
};
}
});
ng-repeat creates its own scope, hence the scope of your controller and the scope inside of the ng-repeat is not the same.
therefore $scope.showModal will not be defined inside of the ng-repeat.
the main mistake you are doing here is the "there always has to be a dot in there" rule.
look here:
Why don't the AngularJS docs use a dot in the model directive?
i would recommend to take a little tutorial about the most made angularjs mistakes first, because indeed there is some stuff to know about angularjs before you stop running into little traps like this.
furthermore you did not inject $modal to your controller which should lead in an error like $modal is undefined or something like that.
also you didn't even create/add the corresponding html file you are about to open.
and last but not least you didn't add any dependencies to your angular module regarding bootstrap. so your app won't be able to use/inject $modal anyhow.
see a working plunkr here:
http://plnkr.co/edit/rOjXt1C4E6lHRXUqHdHq?p=preview
have a look at the line where i am "putting the dot in"
$scope.ctrl = this;
i replaced the templateUrl by a simple template because i think it's enough to give the idea.
in the end i have to say that there was so many things wrong about your code that you really should try to debug more on your own and try to accomplish things more step by step.
since there have been like 4-5 mistakes in it this code barely can be your own, but rather is some random copy&paste stuff from anywhere.
otherwise you could not have accomplished that many different lines of code which don't do anything, sorry.
First is you need to add ui.bootstrap module to you ar angular app and pass $modal to your controller like this
var app = angular.module("appUserSchedule", ['ui.bootstrap']);
app.controller("CtrlUserSchedule", function($scope,$http,$location, $modal) {
Then you need to add modalContent.html. This displays the html inside modal window
This may not be the answer, but make sure showModal is receiving the correct arguments. Appears you are only sending $index.
Would have simply made this a comment, but not quite there on the reputation yet. :-)
Related
When the page close is triggered by the user, the JS alert pop-up is displayed.
Now how can I handle whether the user has clicked the leave or cancel button
On leave the unload event will be triggered. I am not sure if it possible to catch the cancel properly.
const confirmed = window.confirm('are you sure?');
if (confirmed) {
// user confimed
} else {
// user did not confirm
}
If you want to prevent users from leaving the page you must add canDeactivate guard to that component route definition.
More on it here
Here is my code main.html
<html>
<div class="row">
<div class="col-sm-3 columns">
<button type="" class="btn btn-info" ng-click=“submit()”> Submit </button>
</div>
</html>
this is the main html page once the submit is pressed the respective submit function will be called.
Here is my AlertpopupModal.html
<html>
<script type="text/ng-template" id="AlertpopupModal.html">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Do you want to leave this site</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<p> Changes that you made may not be saved </p>
<button type="button" class="btn btn-default pull-left"
ng-click ="leave()">Leave</button>
<button type="button" class="btn btn-default pull-left"
ng-click="cancel()">Cancel</button>
</div>
</div>
</div>
</div>
Inject $modal into your controller.
angular.module('app')
.controller('AlertModalController', function($scope,$modal ) {
//code
});
Now add this code into your controller.
In this code I am simply calling the template through the id which I have used the modal template. And two functions are called for cancel and leave through which the modal will get closed as per the function.
$scope.submit= function ( ) {
alertModalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: 'AlertpopupModal.html',
scope: $scope
});
$scope.leave = function () {
console.log("leave");
alertModalInstance.close(true);
};
$scope.cancel = function () {
console.log("cancel");
alertModalInstance.dismiss('cancel');
};
Try this:
export class AppComponent {
title = 'leave-site';
#HostListener('window:beforeunload', [ '$event' ]) beforeunloadHandler(event) {
return false;
}
}
I'm launching a modal from my web page and i'm making some changes to an array that i'm passing from my parent, but before I send the updated results back after closing the modal my parent scope object is getting updated. If the user changed the mind not to update and then cancel the modal I don't want those changes to be seen on my parent controller
Parent Controller Code:
const modalInstance = $modal.open({
templateUrl: '/app/modal.html',
controller: 'modalController',
controllerAs: 'modal',
resolve: {
mappedData: () => parentCntrl.groupData
}
});
modalInstance.result.then(result => {
if (result) {
parentCntrl.groupData = result;
}
});
Child Controller Code:
modal.ok = () => {
$modalInstance.close(modal.mappedData);
};
modal.close = () => {
$modalInstance.close();
};
Because the data you are passing down is a non primitive type, so not an number or string for example, this will be copied by reference in memory.
You should make a copy of the data and use the copied version in the modal and when the modal is saved use that copied version to merge any changes back to the original object in the parent controller
A very similar question asked here Using AngularJS "copy()" to avoid reference issues and how angular.copy() can be used to avoid reference issues
When you instantiate a $uibModal, you define a configuration object, where the setting scope : should be the object reference that this modal will use (as a scope). It is pretty normal to define something like scope: $scope. This way, if the variables inside the modal controller have the same names as the ones in the parent scope, then the assignment would occur to the same object.
As some comments say, the use of angular.copy() would be a good idea or maybe a simple $rootScope.new();
var modalInstance = $uibModal.open({
...
scope : $rootScope.new(),
//or
scope : angular.copy($scope)
...
});
I hope this helps
You can also try this simple code.
HTML:
<tr ng-repeat="users in list">
<td>{{users.firstname}}</td>
<td>{{users.lastname}}</td>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal" ng-
click="selectUser(users)">Edit Info</button>
</tr>
Controller:
$scope.selectUser = function(users){
$scope.clickedUser = users;
$scope.modalInfo = angular.copy($scope.clickedUser);
};
Modal:
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title">Update bio</h2>
</div>
<div class="modal-body">
<input type="text" ng-model="modalInfo.firstname">
<input type="text" ng-model="modalInfo.lastname">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
I thought this should be something easy because I've done it before, but apparently the first time I got lucky, either that or Angular has some quirks I have not yet wrapped my head around.
What I'm trying to do is be able to edit a customer order. All customer orders are sent to the client from the database as JavaScript objects, using PHP.
That is fine, my problem is within Angular when I want to edit these orders, through a modal window (which has its own scope). Basically a form pops up in the modal that asks the user to edit the Javascript object, of course however no user wants to edit a raw object so it's a form with ng-models tied to that object. My problem is the ng-model doesn't seem to pick up my object reference.
So here we go (I have a plunker below):
This is the controller that fetches the customer order on the page the first time (before the user initiates the modal to edit the order):
controller: function($scope,$http,$stateParams,$uibModal) {
$http({
method: 'GET',
url: 'http://example.com/orderDATA',
params: {id: $stateParams.id}
}).then(function successCallback(html) {
html.data[0].orderProperties = JSON.parse(html.data[0].orderProperties); //format data from server so that JavaScript can play with it
$scope.order = html.data[0];
$scope.edit = function (order) //function that launches modal window
{
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'EditOrderInstance.html',
controller: 'EditOrderCtrl',
scope: $scope,
size: "lg",
resolve: {
order: function() {
return order;
}}
});
}
});
}
The edit() function is called like so from the following template:
<div class="container" style="margin-top:2%;">
<div class="row">
<div class="col-xs-12" style="text-align:center;">
<p class="whiteNoPointy">Customer Name : #{{order.orderProperties.firstName + " " + order.orderProperties.lastName}}</p>
</div>
<div class="col-xs-12" style="text-align:center;">
<p class="whiteNoPointy">Pickup : #{{order.orderProperties.pickupDate + " in " + order.orderProperties.location}}</p>
</div>
<div class="col-xs-12" style="text-align:center;">
<p class="whiteNoPointy"><i class="fa fa-envelope" aria-hidden="true"></i> : #{{order.orderProperties.email}}</p>
</div>
<div class="col-xs-12" style="text-align:center;">
<p class="whiteNoPointy"><i class="fa fa-phone" aria-hidden="true"></i> : #{{order.orderProperties.phone}}</p>
</div>
<div class="col-xs-12" style="text-align:center;">
<button type="button" style="border-radius:0;" class="btn btn-warning" ng-click="edit(order)">Edit This Order</button> <button type="button" style="border-radius:0;" class="btn btn-danger">Delete or Refund This Order</button> <button type="button" style="border-radius:0;" class="btn btn-primary">Complete This Order</button>
</div>
</div>
</br></br>
<div class="shipping whiteNoPointy text-center" ng-repeat="specific in order.order">
<div class="col-xs-12" ng-if="specific.quantity.value>0"><p>#{{specific.quantity.value}} #{{specific.Name}}</p></div>
</div></div>
This part works fine. However, when I do hit the edit function, that takes us into a new scope and a new controller, specifically the one below:
app.controller('EditOrderCtrl', ['$scope', '$http', '$uibModal','$uibModalInstance', 'order', function($scope, $http, $uibModal, $uibModalInstance, order) {
$scope.order = order;
So as is hopefully clear, all I did was pass the order object to the modal.
Now to me, all I've done is pass the same order object around, and now to this new controller. But the problem is that when I investigate this latest order it has no $$hashkey. I say this because of the problem that follows, as I said I did this before except in that instance I passed the order object from inside an ng-repeat, and the last step worked. But here when I do it it doesn't work.
What I mean is, when I try to have the models in the modal template line up with the order object passed to the modal's controller, they don't. I just get blank inputs, which isn't good because to edit a customer order you need to now what the current order is, otherwise it's like you are starting over.
Here is the template with the ng-model.
<script type="text/ng-template" id="EditOrderInstance.html">
<div class="modal-header" style="text-align:center;">
<h3 class="modal-title">Edit Order</h3>
</div>
<div class="modal-body" style="text-align:center;">
<form name="order" novalidate>
<label for="firstName">First Name</label>
<input type="text" name="firstName" class="form-control" ng-model="order.orderProperties.firstName" ng-minlength="2" required>
<p ng-show="orderorderProperties.firstName.$error.minlength" class="warning">Please put your full first name.</p>
</div>
<button ng-disabled="order.$invalid||totalPrice===0" ng-click="submitOrder()" class="btn btn-default">Submit</button>
</form>
</div>
<div class="modal-footer" style="text-align:center;">
<button class="btn toggledz" type="button" ng-click="save()">Submit</button>
<button class="btn" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
Notice the order.orderProperties.firstName ng-model. This is there, I console log it from the modal's controller and I can see it is set, but the model is blank. So why is this the case? Why did it work before when the console.log() showed the object was passed with a $$hashkey? I can't pass from an ng-repeat again because I only have one order, so there is nothing to iterate over in the first template.
Please assist. I need to be able to edit the order using ng-model, so that the admin can edit the order and send a new order object back to my server.
Edit: Added a plunker: https://plnkr.co/edit/x6FPiS6OtF2gdn4ZtFyJ?p=preview
From the first look, the problem appears to be with your resolve function
controller: function($scope,$http,$stateParams,$uibModal) {
$http({
method: 'GET',
url: 'http://example.com/orderDATA',
params: {id: $stateParams.id}
}).then(function successCallback(html) {
html.data[0].orderProperties = JSON.parse(html.data[0].orderProperties); //format data from server so that JavaScript can play with it
$scope.order = html.data[0];
$scope.edit = function (order) //function that launches modal window
{
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'EditOrderInstance.html',
controller: 'EditOrderCtrl',
scope: $scope,
size: "lg",
resolve: {
order: function() {
return $scope.order;
}}
});
}
});
}
Your resolve function for order should return $scope.order
Try it and let me know if this works. I am just going with the instincts
I got it to work by changing the variable name, I guess for some reason it was looking to the old $scope.order instead of the one resolved to the modal?
Anyway, here is a working plunker...
https://plnkr.co/edit/AZpeFGaBktFjSr2SL2Rv?p=preview
I would like a directive that dynamically knows if I'm following the user in my App.
I have a resource to get the currentUser
this.following = function () {
var defer = $q.defer();
var user = $cookies.getObject('currentUser');
UserResource.get({id: user.id}).$promise.then(
function (data) {
defer.resolve(data.following);
});
return defer.promise;
};
This is in one of my services. It returns all users that I'm following.
When instantiating my controller I fetch the users I follow within my app:
UserService.following().then(
function (data) {
$scope.following = data;
});
I would like to move that into a directive so that I can easily reuse it somewhere else in my app.
This is the HTML I am using right now (and it's not really beautiful) :
<div class="item" ng-repeat="user in users">
<div class="right floated content">
<div ng-show="isFollowing(user)" class="ui animated flip button" tabindex="0"
ng-click='unFollow(user)'>
<div class='visible content'>
Following
</div>
<div class="hidden content">
Unfollow
</div>
</div>
<div ng-hide="isFollowing(user)" ng-click="follow(user)" class="ui button">Follow</div>
</div>
</div>
But instead something like :
<div class="item" ng-repeat="user in users">
<um-follow-button um-user="user"></um-follow-button>
</div>
then depending if I'm following the user or not then render one of the two options.
I don't know if I will have to use a controller in my directive.
I have looked at : https://gist.github.com/jhdavids8/6265398
But it looks like a mess.
I know it might be a simple question, but I'm frustrated here, and I can't make it work. I'm new to AngularJS, and I'm trying to implement a modal dialog (or find one) with these conditions:
Dialog content might come from anywhere—a string template, a script template, or a template from a URL
Dialog title and actions will come from the caller, not the callee. In other words, the parent scope decides the title and which action buttons should exist in the modal dialog (many dialogs I found encapsulate the title and action buttons in the template itself, for example this one)
Content of the template should be totally independent from parent scope (caller). In fact, it might not even be written in AngularJS. It might use jQuery.
In case the loaded template is in AngularJS, it should encapsulate its controller. For example, ng-include doesn't like <script> tags.
There is a workaround for it (here, here and here) but the idea of decorating a script tag with text/javascript-lazy is very smelly and dirty, let alone that I want the content HTML to be self-contained and executable in case it's not loaded as the content of an AngularJS modal dialog.
Communication between the parent scope and the content should be done via a common contract (JavaScript events come to my mind)
I've tried ngDialog, but the problem is that the container should pass the controller to the loaded template. That's not what I want.
In Bootstrap dialog also it seems that you have to pass the controller from the parent scope to the dialog content. This breaks the very notion of encapsulation. It's not desirable. Also, it's dependent on dialog result, which is not desirable either.
I recommend use Angular-UI library. You can easy create any dialog a-la "Twitter Bootstrap":
Include js in your page head.
<script src="/desktop/libs/angular-bootstrap/ui-bootstrap.js"></script>
<script src="/desktop/libs/angular-bootstrap/ui-bootstrap-tpls.js}"></script>
Include modules at app initialization.
var Application = A.module('MyApp', [ 'ui.bootstrap', 'ui.bootstrap.modal' ]);
Inject in jour controller $modal:
(function (A){
"use strict";
A.module("MyApp").controller("OpenDlg", [ "$scope", "$modal", function($scope, $modal){
$scope.openDlg = function(){
$modal.open({
controller : 'CategoryAddController',
templateUrl : '/admindesktop/templates/category/add/'
}).result.then(function(modalResult){
console.log(modalResult);
});
};
} ]);
}(this.angular));
For example, simple template for dialog:
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title text-center">Создание новой категории</h4>
</div>
<form class="modal-body form-horizontal" name="categoryForm">
<div class="form-group">
<label for="name" class="control-label col-xs-3">Название</label>
<div class="col-xs-9">
<input name='name' type="text" class="form-control" ng-model="category.name" maxlength=50 required ng-required="true"/>
</div>
<div class="row has-error" ng-show="errors.name">
<p ng-repeat="error in errors.name">{{ error }}</p>
</div>
</div>
<div class="container-fluid" ng-show="errors.length > 0">
<div class="row">
<p class="text-center text-danger" ng-repeat="error in errors">{{ error }}</p>
</div>
</div>
</form>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="save()" ng-disabled="categoryForm.$invalid">Сохранить</button>
<button class="btn btn-default" ng-click="cancel()">Отмена</button>
</div>
</div>
Main: controller for modal window:
(function(A) {
"use strict";
var app = A.module('MyApp');
app.controller('CategoryAddController', [ '$scope', '$modalInstance', 'Category', 'growl', function($scope, $modalInstance, Category, growl) {
$scope.save = function() {
var category = new Category($scope.category);
category.$save(function() {
growl.success('Категория успешно создана');
$modalInstance.close(true);
}, function(response) {
$scope.errors = response.data;
});
};
$scope.cancel = function() {
$modalInstance.close(false);
};
} ]);
}(this.angular));
I use Service for data changing between modal controller and parent scope:
(function(A){
"use strict";
A.module("MyApp").service('Storage', function(){
return {
storedData: undefined
};
});
}(this.angular));
In parent scope:
Storage.storedData = ...; //For example, selected row of table
In modal controller:
$scope.item = Storage.storedData; //Selected row of table
Also angular have special module type, value.