Trying to set up a (I think) relatively simple modal to show the sites cookie policy.
The policy is on /cookiepolicy. Checked and that link works nicely.
I then created a button (that does call the code)
<a class="btn btn-default" href ng-click="showCookie()">Read More</a>
As I just want to call the modal for the url, nothing more is added to the html.
The function that calls the modal (which also is called and reports success as per the last line.)
app.controller('IndexController', function($scope, ModalService) {
$scope.showCookie = function (data) {
ModalService.showModal({
templateUrl: "/cookie-policy",
controller: "ModalController"
}).then(function (modal) {
//it's a bootstrap element, use 'modal' to show it
modal.element.modal;
modal.close.then(function (result) {
console.log(result);
});
});
}
});
The modal also have its own controller
betchaHttp.controller('ModalController', function($scope, close) {
// when you need to close the modal, call close
close("Success!");
});
The thing is that when I press it, nothing comes up on the page, neither is there a error message. Am I missing something rather obvious (or not so obvious)
Fortunately, this is just a small syntax typo on your end. Observe your .then() block and change...
modal.element.modal; // -- nothing
to
modal.element.modal(); // -- fn call
JSFiddle Link - demo
Related
This HTML button code is in controller:
On click of a button, trying to call this function:
<button ng-click="vm.openpopup()" ng-if="!vm.data.length"
uib-tooltip="Add Business Value Chain"
class="btn btn-default `enter code here`ti-form-action-btn" id="add-bvc-btn">
<em class="glyphicon glyphicon-plus-sign"></em>
Add
</button>
function openpopup() {
$scope.$broadcast('popup');
}
Below is the broadcast listener code which is inside component under the same controller mentioned above:
$scope.$on('popup', function () {
openModalPopup();
});
The button is displayed only when there is no data present.
Function call is absolutely fine, but broadcast works only once if there is data and if those data are deleted manually, then button gets displayed and broadcast works. But for on page load, if no data present. Broadcast not getting triggered.
Tried using $rootScope.broadcast, still no luck.
Also checking with some other answers, binded the block of code inside $timeout, still no results.
So this is a communication between controller and component using broadcast. How to handle this on load?
I think the issue in your case you have controlled the visibility of your button with ng-if, try it using ng-show instead of ng-if. In case of ng-if there is a chance that the template not to load. I hope that will solve your problem.
I am creating a modal and closing it once data comes in the background.
var modal = modal.open({..some params..});
//after data loads
modal.close();
So my problem is, since everything is asynchronous if my data comes instantaneously then my modal.close() executes before modal opens fully and then my screen remains stuck with the modal screen.
One solution I found is adding a timeout to the modal.close
$timeout(function() {
modal.close();
}, 1)
This works but is it the right way to do it? Or there is some other better solution?
The modal instance has an opened promise on it that you should use to guarantee the modal has finished opening before you try to close it. From the docs:
opened - a promise that is resolved when a modal gets opened after downloading content's template and resolving all variables
rendered - a promise that is resolved when a modal is rendered.
Mixing it with your HTTP request might look like
modal = $modal.open({...})
$http.get(...).then(function(response) {
modal.opened.then(modal.close)
})
Here's a demo of both the way you're currently doing it and doing it using opened.
$scope.open = ->
modalInstance = $modal.open(
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl'
)
if $scope.work
modalInstance.opened.then(->
modalInstance.close()
)
else
modalInstance.close()
I'm using Angular for a web app. I used Angular UI bootstrap to show an alert in my page as response to some action, say a button click. However, I placed this alert div at beginning of the page. My page is long. So when I'm some where at the middle of the page and an alert happens, the user will not know the alert happened because it is at beginning of the page. I want to scroll page automatically to alert area when it happens. How to do this ?
Some what related to this https://stackoverflow.com/a/24203856/2182674, but its not looking quite good to show at fixed place in the page. That is overlaying page content and not good for my case.
Alert content is set by a controller in angular. So using href anchor for button won't work.
When triggering the action you can scroll to the alert element using something like this:
$("#button").click(function() {
/* trigger UI bootstrap alert */
/* ... */
$('html, body').animate({
scrollTop: $("#alertElementtoScrollToID").offset().top
}, 2000);
});
Angular can $anchorScroll to an element:
angular.module('anchorScrollExample', [])
.controller('ScrollController', ['$scope', '$location', '$anchorScroll',
function ($scope, $location, $anchorScroll) {
$scope.gotoBottom = function() {
// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash('bottom');
// call $anchorScroll()
$anchorScroll();
};
}]);
You can do this with a simple anchor html element :
<a id="myalert">Alerte</a>
...
Go to the alert
Here's what I wish to achieve:
User is on url example.com/2
User goes to url example.com/2d <- this is not valid url
User is fowarded to example.com/2d/404_error
User clicks browser "back" button and lands on example.com/2
Here's what I have a problem with
User clicks browser "back" button and lands on example.com/2d
User is again automatically forwarded to example.com/2d/404_error
I have created infinite back button loop :(
In my app.config I have
.when('/:gameId/404_error', {
templateUrl: 'views/page_not_found.html'
})
.when('/:gameId', {
controller: 'game',
templateUrl: 'views/gamePage.html'
})
It is called out by app.factory when data is not fetched
}, function(response) {
// something went wrong
$location.path("/" + id + "/404_error");
return $q.reject(response.data);
});
I have tried the "otherwise" method, but using routeparams renders it useless.
You can test it out here:
http://vivule.ee/2 <- working url
http://vivule.ee/2d <- not working url
window.history.go(-2)
This method is pure javascipt you can try to use $window.history.go(-2) in angularjs
Good works!
Fixed it with ng-switch and ng-include
In the controller, when data is not loaded I added:
$scope.page_not_found = true;
And to the template I added:
<div ng-switch on="page_not_found">
<div ng-if="page_not_found" ng-include="'views/page_not_found.html'"></div>
</div>
Everything happens in one .html template. I hide the main content and import the 404 page with ng-include, this solution seems to be faster as well.
I have a problem. I have a registry form and many other forms.
Now I want to check whether the form is dirty and then I bring a confirm box if they really want to leave/close this page.
First of all, when I go back with the browser's back button and not with my other button ([button..] just 4 example) the confirmation box shows up two times and after two times confirming I'm still on the same page, just the form is resetted. When I press my own everything works fine.
Secondly, when I close the browser, my confirmation box shows up and afterwards the browsers confirmation box also shows up, but I only want one of them.
$scope.$on('$locationChangeStart', function (event, next, current) {
if ($scope.requestForm.$dirty) {
if (!$window.confirm('Unsaved Changes, leave Page?')) {
//cancel leaving view2
//works when clicking links, but doesn't work when using the back button
event.preventDefault();
}
} else {
}
});
$scope.$watch("requestForm.$dirty", function (newval) {
window.myGlobalDirtyFlag = newval;
});
window.onbeforeunload = function (e) {
if (window.myGlobalDirtyFlag === true) {
if (!$window.confirm('Unsaved Changes, close Page?')) {
//cancel leaving view2
//works when clicking links, but doesn't work when using the back button
return false;
} else {
}
}
};
$scope.$on("$destroy", function () {
window.myGlobalDirtyFlag = false;
});
May someone also have an idea how I bring this into an AngularJS directive, so I don't have to copy this code for every site where I have a form on it. (Every page only has 1 form, but every form name is different!)
My controllers are in seperate javascript files, (function blablaController() {}) and I pass this per routeProvider in my config file (templateUrl: blabla.html, controller: blabalController)
Regards,
Anthrax
Here is a service and directive that answers your question. Probably the only change you might consider making to it is using $window instead of window inside the service. As the instructions state, you'll just add the attribute unsaved-changes-warning to your form.
https://github.com/facultymatt/angular-unsavedChanges