I have a problem with a scope variable. When i open the form, the content is displayed correctly in the input field. But when I change them and the ok-function fires the changes are not displayed. instead i get the content of form.name. Why isnt the scope updated by the ng-model of the input field?
app.controller('updateFormCtrl', function( $scope, $modalInstance, APIService, form) {
$scope.name = form.name;
$scope.ok = function() {
alert($scope.name)
};
});
View:
<div class="col-sm-10"><input ng-model="name" type="text" class="form-control" placeholder="Categorie"></div>
Edit: Here is the other controller:
$scope.updateForm = function( form ) {
var modalInstance = $modal.open({
templateUrl: 'views/modals/updateForm.html',
controller: 'updateFormCtrl',
resolve: {
form: function() {
return form;
}
}
});
modalInstance.result.then(function() {
$scope.categories = APIService.query({ route:'category' });
});
};
Edit 2:
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="cancel()">Abbrechen</button>
<button type="button" class="btn btn-primary" ng-click="ok()">Speichern</button>
</div><!-- /.modal-footer -->
It's because your $scope.ok isn't defined inside updateFormCtrl. So basically, your ok() cannot read the changes you have made in textbox.
Try moving $scope.ok inside controller.
app.controller('updateFormCtrl', function( $scope, $modalInstance, APIService, form) {
$scope.name = form.name;
$scope.ok = function() {
alert($scope.name)
};
});
I think this is the solution:
https://egghead.io/lessons/angularjs-the-dot
Related
I want to create angularjs directive mydialog wihc triggers the modal.Once the model is open I will have title and content,okcancel and confirm .Once the user click the confirm the corresponding action i.e. save should trigger .Here the save action is in MainCtrl .How to trigger that.
HTML Directive:
<my-dialog newmodal="alertModel" ></my-dialog>
ConfirmationDailog.html Code :
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="$hide()">×</button>
<h4 class="modal-title">{{alertModel.Title}}</h4>
</div>
<div class="modal-body">
{{alertModel.Message}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="cancel()">Cancel</button>
<button type="button" class="btn btn-danger" ng-click="executeDialogAction(alertModel.action)">Confirm</button>
</div>
</div>
Below is the JS part :
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', ['$scope', '$uibModal',
function ($scope,$uibModal) {
$scope.name = 'World';
var alertModel = {};
alertModel.Title = "My Title";
alertModel.Message = "The Conent";
alertModel.action= "save";
$scope.alertModel = alertModel;
$scope.save= function () {
alert('from outside');
}
}]);
my Dialog Directive that triggers the model
app.directive('myDialog', [
function () {
return {
scope: {
mymodal: '=newmodal',
},
template: "<button class='btn btn-danger' ng-lick='open(mymodal)'>Open Modal</button>",
controller: ModalController
};
}]);
function ModalController($uibModal, $log, $scope) {
$scope.animationsEnabled = true;
$scope.open = function (alertModel) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'ConfirmationDailog.html',
controller: ModalInstanceCtrl,
scope:$scope,
resolve: {
test: function () {
return alertModel;
}
},
size: 'lg'
});
modalInstance.result.then(function (selectedItem) {
console.log("Confirmed: " + selectedItem);
$scope.selectedItem = selectedItem;
}, function () {
$log.info('modal dismissed at: ' + new Date());
});
};
}
function ModalInstanceCtrl($scope, $uibModalInstance, test) {
console.log('in');
$scope.alertModel = test;
$scope.cancel = function () {
$scope.$dismiss();
}
$scope.executeDialogAction = function (action) {
if (typeof $scope[action] === "function") {
$scope[action]();
}
};
}
I have this function inside my controller to which I send a series of data that I receive as parameters correctly.
$scope.changeValues = function(measure,name,valCol) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
backdrop: 'static',
scope: $scope,
controller: function($scope, $modalInstance) {
$scope.ok = function(){
$scope.myVar = "hello";
console.log($scope.myVar);
modalInstance.close();
}
}
});};
I want to change the value of the $scope.myVar variable in my $modal.window, but these changes are not saved. Where is the error?
<div class="reducedfont" ng-init="loadCtrl()">
<script type="text/ng-template" id="myModalContent.html">
<!-- template for modal -->
<div class="modal-header">
<h3 class="modal-title">{{valueName}}</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">Ok</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div></script>
<p>{{myVar}}</p>
if you want to change the
$scope.changeValues = function(measure,name,valCol) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
backdrop: 'static',
scope: $scope,
controller: function($scope, $modalInstance) {
$scope.ok = function(){
$scope.myVar = "hello";
console.log($scope.myVar);
$modalInstance.close($scope.myVar);
}
}
})//end of $model
modalInstance.result.then(function (SelectedItem) {
setTimeout(function () {
//SelectedItem is the value return from modal controller on close and $scope.myVar is the variable in the controller where $scope.changeValues function is defined.
$scope.myVar= SelectedItem;
}, 500);
});
};//end of function
Ok, you are doing well but in a wrong way.
If you want to keep the updated value you have to set it as an object property value.
Working with string (or in general with primitives type) breaks the object reference between your scopes.
Try with:
controller: function($scope) {
$scope.ok = function(){
$scope.myVar.value = "hello";
console.log($scope.myVar);
modalInstance.close();
}
}
When you will be out of your modal (and when its scope is destroyed) your $scope.myVar will keeping that property value with the update.
I'm using Angular 1.4.1 and UI Bootstrap 0.13.
I have a directive from which I'm opening a modal. The modal opens fine, but the buttons seemingly don't get bound to their handlers - they don't do anything. I've used this same code in another project just fine, except not from within a directive.
My directive:
(function () {
var app = angular.module('myApp');
app.directive('someDirective', function () {
return {
restrict: 'E',
templateUrl: 'SomeDirective.html',
scope: {
list1: '=list1',
list2: '=list2',
save: '&'
},
controller: ['$scope','$modal','myService', function ($scope,$modal,myService) {
$scope.openModal = function () {
var modalInstance = $modal.open({
templateUrl: 'ModalTemplate.html',
controller: 'modalController',
backdrop: 'static',
size: 'sm',
resolve: {
saveData: function () {
//do save action
}
}
});
modalInstance.result.then(
function (itemToSave) {
//save item
},
function () {
//Cancel
}
);
};
}]
}
});
}());
The modal's controller:
(function() {
var app = angular.module('myApp');
app.controller('modalController', [
'$scope', '$modalInstance', 'saveData',
function($scope, $modalInstance, saveData) {
$scope.saveData = saveData;
$scope.save = function() {
$modalInstance.close($scope.saveData);
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
}
]);
}());
And the template for the modal content:
<div class="modal-header bg-info">
<h3 class="modal-title">Add New Record</h3>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form"></form>
</div>
<div class="modal-footer bg-info">
<button class="btn btn-primary" ng-click="save()">Save</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
My thought is that I'm having issues with scope, but I can't track it down. I have put break points on modalController. The app.controller() call happens when the app loads, I've seen that. But breakpoints within save() and cancel() never get hit.
Can someone help me figure out why the modal's buttons don't do anything?
This turned out to be a stupid mistake. At some point I apparently overwrote the name of one of the other controllers in my project with the same name of the controller I was using for the modal. The other controller did not have save() or cancel() methods so nothing was happening. As soon as I fixed my error and all controllers once again had their proper names this started working again.
Quite new with AngularJS (and AngularJS UI) and I am unable to close a modal window.
The HTML code as follows:
<div>
<div data-ng-show="agencies || agencies.length > 0">
<div>
<h3>
Agencies
</h3>
</div>
<div>
<span class="glyphicon glyphicon-cloud-upload"></span> Add
</div>
</div>
</div>
Controller:
'use strict';
app.controller('agencyController', function ($scope, $modal, agenciesDataService) {
$scope.agencies = [];
$scope.agency = null;
init();
function init() {
getAgencies();
};
function getAgencies() {
var onResponse = function (results) {
$scope.agencies = results.data;
};
var onError = function (error) {
alert(error.message);
};
agenciesDataService.getAgencies()
.then(onResponse, onError);
};
$scope.showModalAddAgency = function () {
var modalInstance = $modal.open({
templateUrl: 'app/views/agencydetail.html',
controller: 'agencyController',
backdrop: 'static'
});
};
$scope.addAgency = function addAgency() {
var currentAgency = this.agency;
var onResponse = function (results) {
currentAgency.Id = results.data.Id;
currentAgency.Name = results.data.Name;
currentAgency.AgencyPortalAccountId = results.data.AgencyPortalAccountId;
$scope.agencies.push(currentAgency);
currentAgency = {};
// HOW TO CLOSE THE MODAL FROM HERE? WHAT FUNCTION DO I CALL?
};
var onError = function (error) {
//alert(error.message);
}
agenciesDataService.addAgency(currentAgency)
.then(onResponse, onError);
};
});
Pretty much, after making the POST request, I want to close the modal window, but I don't have any idea how. Not sure how I can reference the modal window which I opened.
Any insight appreciated.
Update:
My modal's html includes an Save and Cancel button.
<div class="modal-footer">
<button class="btn btn-primary normal-button"
ng-click="addAgency()">Save</button>
<button class="btn btn-warning" ng-click="$dismiss()" style="width:100px;">Cancel</button>
</div>
The modal does close when I hit the Cancel button. What I want to achieve is being able to close the modal when the addAgency function is completed.
You need to save your modal instance in the $scope so that you have a reference to it later.
So you'd init your $scope.modalInstance = null; at the top.
Then you'd open your modal like this:
$scope.modalInstance = $modal.open({
templateUrl: 'app/views/agencydetail.html',
controller: 'agencyController',
backdrop: 'static'
});
To close, you would then call $scope.modalInstance.close(); (which would go where you have your // HOW TO CLOSE THE MODAL FROM HERE? WHAT FUNCTION DO I CALL? comment.
Here's a plunkr that shows how to do it: EXAMPLE
To close your modal you have 2 functions : "close" and "dismiss".
Let say that the end of your modal html file looks like that :
<div class="modal-footer">
<input type="button" class="submit" value="Save" ng-click="ok()" />
<input type="button" class="cancel" value="Cancel" ng-click="cancel()" />
</div>
All you have to write in your modal controller is that :
$scope.cancel = function(){
$modalInstance.dismiss('cancel');
};
$scope.ok = function(){
// you can pass anything you want value object or reference object
$modalInstance.close("clicked ok");
};
And if you want to know if the user clicked on "cancel" or "ok" you have to change your function "showModalAddAgency" like that :
$scope.showModalAddAgency = function () {
var modalInstance = $modal.open({
templateUrl: 'app/views/agencydetail.html',
controller: 'agencyController',
backdrop: 'static'
});
modalInstance.result.then(function (resultOk) {
// OK
}, function (resultCancel) {
// CANCEL
});
};
I hope my answer fit you.
Have a nice day !
I'm using angular bootstrap modal.
termsText is populated and the scope.productTerms does contain a value. But for some reason when I output {{ productTerms }} inside the modal the value is not being displayed. Why?
js
$scope.openProductTerms = function (termsText) {
$scope.productTerms = termsText <-- has a value in console.log()
var modalInstance = $modal.open({
templateUrl: 'myModalTerms.html',
controller: ModalInstanceCtrl
});
var ModalInstanceCtrl = function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.dismiss('OK');
};
};
html
{{ productTerms }} < ==== value shows outside modal
<script type="text/ng-template" id="myModalTerms.html">
<div class="modal-body">
{{ productTerms }} <==== same value does not show insdie modal?
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
</div>
</script>
The modal has a new controller and therefore a new scope.
services.js
angular.module('services',[]).
factory('sharedService', function($rootScope) {
var sharedService = {};
sharedService.value = null;
sharedService.prepForBroadcast = function(value) {
this.value = value;
this.broadcastItem();
};
sharedService.broadcastItem = function() {
$rootScope.$broadcast('shared');
};
return sharedService;
});
controller.js
$scope.openProductTerms = function (termsText) {
sharedService.prepForBroadcast(termsText);
var modalInstance = $modal.open({
templateUrl: 'myModalTerms.html',
controller: ModalInstanceCtrl
});
lastController.js
var ModalInstanceCtrl = function ($scope, $modalInstance,sharedService) {
$scope.$on('shared', function() {
$scope.productTerms = sharedService.value;
});
$scope.ok = function () {
$modalInstance.dismiss('OK');
};
};
Try using {{$parent.productTerms}} within your HTML
From my experience, it seems that the angular bootstrap modal creates a new scope. So by referencing $parent first, you'll be able to get your model's value.