I know there are a few posts similar to this but I simply can't get any of them to work for me as intended. I'm trying to setup an event handler to listen to a location change on a specific scope. The code looks like this:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="verifyViewChange">
Test
</div>
<script>
var app = angular.module('myApp', []);
app.controller('verifyViewChange', function ($location, $scope) {
$scope.$on('$locationChangeStart', function (event) {
event.preventDefault();
alert("I'm preventing you from leaving the page");
});
});
</script>
</body>
</html>
When I load the page I get the warning, but not when clicking on the link. What do I need to do to make it work?
You should use the native 'beforeunload' event by adding it to the window.
Below is an example:
$scope.addUnloadEvent = function(){
if (window.addEventListener) {
window.addEventListener("beforeunload", handleUnloadEvent);
} else {
//For IE browsers
window.attachEvent("onbeforeunload", handleUnloadEvent);
}
}
function handleUnloadEvent(event) {
event.returnValue = "Your warning text";
};
//Call this when you want to remove the event, example, if users fills necessary info
$scope.removeUnloadEvent = function(){
if (window.removeEventListener) {
window.removeEventListener("beforeunload", handleUnloadEvent);
} else {
window.detachEvent("onbeforeunload", handleUnloadEvent);
}
}
//You could add the event when validating a form, for example
$scope.validateForm = function(){
if($scope.yourform.$invalid){
$scope.addUnloadEvent();
return;
}
else{
$scope.removeUnloadEvent();
}
}
The [fix above] is great just added this bit to the handleUnloadEvent...
function handleUnloadEvent(event) {
/*
This bit here theres another bind that says if this fields initial value is
not the same as its current value add the class of input-changed if it is
remove the class...so you can flag any page ya want to prompt a dialog based
on presence of a class on an input.
*/
var changeCheckCount = $('.input-changed').length;
console.log('changeCheckCount',changeCheckCount);
if(changeCheckCount === 0)
{
$scope.removeUnloadEvent();
}
else if(changeCheckCount > 0)
{
event.returnValue = "You have Unsaved changes do you really want to leave?";
}
Allows you to say if you want dialog to reload or leave page with just a class...Suppose you could bind the dialog too by finding the first one with .input-changed and have a data attribute on it with the message to show as the dialog.
Below is working example , it may helpful to you:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="myApp" ng-controller="verifyViewChange">
Test
</div>
<script>
var app = angular.module('myApp', []);
app.controller('verifyViewChange', function ($location, $scope) {
$scope.funConfirm = function () {
var retVal = confirm("I'm preventing you from leaving the page");
if (retVal == true) {
return false;
} else {
event.preventDefault();
return false;
}
}
});
</script>
Related
I have a problem where a page has two components but only one of them is fully rendered.
The problem seem to be related to $http. I have a angular project where I need to construct a page based on RESTful API. The pages are such that I can expect multiple requests for the same data. At the moment, the set of requests are not behaving correctly.
For the sake of the argument (and also because it is a use case), the following page makes the same request twice.
game.html:
<html ng-app="prvdApp">
<head>
<meta charset="utf-8">
<base href="/">
<title>Providence</title>
<script src="/js/angular-1.6.2.js"></script>
<script src="/data-access/data-access.service.js"></script>
<script src="/score-info/score-info.component.js"></script>
<script src="/js/game.js"></script>
</head>
<body>
<div ng-controller="gameController">
<score-info game-id="8000"></score-info>
<score-info game-id="8000"></score-info>
</div>
</body>
game.js:
angular.module('prvdApp', [
'scoreInfo',
'drivesInfo' ]);
angular.
module('prvdApp').
controller('gameController', function() {
});
score-info.component.js:
angular.module('scoreInfo', [
'dataAccess'
]);
angular.
module('scoreInfo').
component('scoreInfo', {
templateUrl : '/score-info/score-info.template.html',
controller : function ScoreInfoController(dataAccess) {
self = this;
self.$onInit = function() {
dataAccess.game(self.gameId).then(function(game) {
self.game = game;
});
}
},
bindings : {
gameId : '<'
}
});
score-info.template.html:
<div>
Data available: {{ $ctrl.game != undefined }}
</div>
data-access.component.js:
angular.module('dataAccess', []);
angular.
module('dataAccess').
service('dataAccess',
function DataAccessService($http, $q) {
self = this;
self.game = function(game_id) {
var url = '/api/game/' + game_id;
return $http.get(url, { cache: true}).then(function(response) {
return response.data;
});
}
});
The behaviour is as follows:
The page renders with the content:
Data available: false
Data available: false
After some hundreds of milliseconds the $http -request finishes, the page is updated to the following state where only the latter component is updated.
Data available: false
Data available: true
It should be noted that the behaviour is the same even if the two components are of different types with different controllers, etc.
I have a really long json that each comes from different schema.
I did push in order to get them all in one json - that works.
know I want to use a controller for all of them and display it to the screen.
my index
<!DOCTYPE html>
<html ng-app="showFrozen">
<head>
<title>frozen</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body ng-controller="showFrozenCtrl">
<tbody>
<div ng-repeat="themes in showFrozenController.themes" ng-show="$first">
<h2>{{themes.theme}}</h2>
<span>for age: </span>
<p>{{themes.age}}</p>
<span>description: </span>
<p>{{themes.description}}</p>
<p>{{themes.description_more}}</p>
<img ng-src="{{themes.image}}" width="170" height="170">
</div>
</table>
<script src="js/lib/angular/angular.min.js"></script>
<script src="js/showFrozenController.js"></script>
</body>
</html>
my controller
var showFrozen = angular.module('showFrozen',[]);
showFrozen.filter("allItems", function() {
return function(frozen) {
var resultArr = [];
angular.forEach(frozen,function(item) {
resultArr.push(item);
});
return resultArr;
};
});
var model = {};
showFrozen.run(function($http) {
$http.get("http://localhost:3000/frozen").success(function(data){
console.log(data);
model.frozen = data;
});
});
showFrozen.controller('showFrozenCtrl',function($scope) {
$scope.showFrozenController = model;
});
so I don't get any output - but I see the json in the console, I'm attaching an image.
In your controller model is undefined.
Move the HTTP call to your controller and in the success assign the scope.showFrozenController to data
You need to make your $http request inside of your controller.
showFrozen.controller('showFrozenCtrl',function($scope, $http) {
$http.get("http://localhost:3000/frozen").success(function(data){
console.log(data);
$scope.model = data;
});
});
This is because when you try and print items out in your template (html) what is actually being accessed inside of any {{ }} blocks is your $scope object. So to make data available to your template you must store it on your $scope.
Have a read of this blog post
showFrozen.factory('frozenDataSrv',function($http) {
return {
getFrozenData: getFrozenData
};
function getFrozenData() {
return $http.get("http://localhost:3000/frozen")
.then(getFrozenDataComplete)
.catch(getFrozenDataFailed);
function getFrozenDataComplete(response) {
return response.data.results;
}
function getFrozenDataFailed(error) {
logger.error('XHR Failed for getFrozenData.' + error.data);
}
}
});
showFrozen.controller('showFrozenCtrl',function($scope, frozenDataSrv) {
frozenDataSrv.getFrozenData()
.then(function(response){
console.log(response)
})
});
I have a controller which calls a save service, and it is for some reason triggered three times. It is not that great if it saves three instances every time it is triggered. Is my approach of solving it wrong?
I found this following article which says it is a normal behavior in AngularJS
Below is an example which triggers that behavior. I'm using webpack to bundle AngularJS, and other dependencies.
FooCtrl
import {IFooService} from "./FooService";
export class FooCtrl {
static $inject = ["FooService"];
public fooService: IFooService;
constructor(fooService: IFooService) {
console.log("creating foo controller");
this.fooService = fooService;
}
public callService(): boolean {
console.log("call service");
this.fooService.save();
console.log(this.fooService.getSaves());
return true;
}
}
FooService
export interface IFooService {
save(): void;
getSaves(): number;
}
export class FooService implements IFooService{
private saves: number = 0;
public save(): void {
console.log("saved");
this.saves++;
}
public getSaves(): number {
return this.saves;
}
}
Main
namespace Main {
let fooModule = new FooModule.Module();
let main = angular.module("myApp", [
"ngRoute",
fooModule.getFooModule(),
]);
main.controller("BarCtrl", function($scope) {
$scope.message = "Bar";
});
main.config(function($routeProvider: ng.route.IRouteProvider) {
$routeProvider.when("/", {
"templateUrl": "foo/index.html",
});
});
}
index.html
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://localhost:8080/webpack-dev-server.js"></script>
<script src="vendors.bundle.js"></script>
<script src="app.bundle.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
index.part.html
<div ng-controller="FooCtrl as ctrl">
<p ng-bind="ctrl.callService()"></p>
</div>
Because you are binding your method to the <p> element, it will be trigger on every digest cycle so that angular can check if the value changed.
I am not sure what you are trying to do exactly, but it looks like this this method should be trigger by a user action or maybe periodically and controlled using $timeout service.
Read more about scope digest cycle in the official documentation.
I make two directives .To communicate between two directives I used a factory .
but it not work properly ..I want to delete my text when I press delete button ..I take factory to do my task but it not working .I also try to take service .it also don't help
here is my code
http://plnkr.co/edit/Yenmira9J9XpjscQzRoX?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="app">
<a></a>
<b></b>
<script>
angular.module('app',[]).directive('a',function(){
return {
restrict :'E',
scope:{},
templateUrl:'a.html',
controller:'ts',
controllerAs:'vm'
}
}).controller('ts',function(sharedService){
var vm=this;
vm.delete=function(){
alert('--');
sharedService.deletepro();
}
}).directive('b',function(){
return {
restrict :'E',
scope:{},
templateUrl:'b.html',
controller:'bb',
controllerAs:'vm'
}
}).controller('bb',function(sharedService){
var pm=this;
pm.message= sharedService.sendData();
}).factory('sharedService', function() {
var data = {};
function deletepro(){
data = {};
}
function sendData(){
var obj = {name:"pQr"};
data = obj;
return data;
}
return {
sendData: sendData,
deletepro: deletepro
};
});
</script>
</body>
</html>
After your controller is first initialized, data and vm.message reference the same object, but when you run deletepro then data references a new object, but vm.message still references the old one.
If you want to pass data in this way, you must never replace data with a new object (otherwise, controllers will have to get the new object again).
Instead of data = {};, try data.name = '';
It looks like you're expecting that it will update because data is a shared reference. But you are resetting it to {}, which breaks the reference. You instead need to modify it:
function deletepro(){
for(var prop in data){
delete data[prop];
}
}
Also, keep in mind a and b are both real html tags, not sure if there are any issues ovewriting the standard ,
I am building an AngularJS application and I would like to show user info in the header of the page when user is logged in. Something like "Welcome,{{username}}".
I have created a SessionHandler service where I keep the information about the user.
module Shared{
export class SessionHandler implements ISessionHandler {
loggedUser: string;
SetLoggedUser(user: string) {
this.loggedUser = user;
}
GetLoggedUser(): string {
return this.loggedUser;
}
}
}
angular.module("MainApp").service("SessionHandler", Shared.SessionHandler);
I have tried creating a directive
angular.module("MainApp").directive("myheader", function () {
return {
restrict: "E",
templateUrl: "/app/shared/partials/header.html",
controller: function ($scope, SessionHandler: Shared.ISessionHandler) {
$scope.LoggedUser = function () {
SessionHandler.GetLoggedUser();
}
}
}
});
my header template is simple..
<span>{{LoggedUser()}}</span>
my main app module looks like this
angular.module("MainApp", ['ui.bootstrap','Login', 'Module2'])
...
.run(($rootScope: ng.IRootScopeService, $location: ng.ILocationService, SessionHandler: Shared.ISessionHandler) => {
$rootScope.$on("$routeChangeStart", (event, next, current) => {
if (!SessionHandler.IsUserLoggedIn()) {
$location.path("/login");
}
if (next.templateUrl == "/app/module/login/partials/login.html") {
SessionHandler.ClearSession();
return;
}
});
});
and my login Controller which is in Login module calls a method on the server and after successful login sets logged user by calling SetLoggedUser() method on SessionHandler.
my index
<html data-ng-app="MainApp">
<head>
</head>
<body>
<div class="container-fluid">
<myheader></myheader>
<div data-ng-view=""></div>
</div>
</body>
</html>
When I start my application logged user is empty so I only see Welcome (I will fix this later) but after I login I am redirected to another partial view but nothing changes in the header.
I am obviously missing something but I just can't figure out what.
Thank you.
In your header directive you are missing the dependency or you can say reference to your SessionHandler service.
Can you try to add that and check what happens next..