I have a InAppBrowser working fine in my app
$scope.openInAppBrowser = function (url) {
var ref = window.open(encodeURI(url), '_blank', 'location=yes');
ref.addEventListener('loadstop', function (event) {
if (event.url.match("close")) {
$scope.refreshGamePage = 1; // this variable is under watch in a directive
ref.close();
}
});
}
here is the directive written to refresh the page
module.directive('reloadPage', ['$http', function ($http) {
return {
restrict: 'A',
link: function ($scope, element, attrs) {
$scope.refreshPage = function () {
if($scope.refreshGamePage ==1)
return true;
else
return false;
};
$scope.$watch($scope.refreshPage, function (v) {
if (v) {
$scope.setGamePage(); // this function will contains code to refresh game page
}
});
}
};
}]);
but it seems like loadstop event listener is unable to update scope variable.
Can anyone help me with this?
Basically idea is I want to refresh current page (one from which InAppBrowser opened) in my app as soon as InAppBrowser closes itself.
Any better way to achieve this will be appreciated.
Just use angular $apply() method to change the value of angular
variables because it is changed out of angularjs turn.
$scope.openInAppBrowser = function (url) {
var ref = window.open(encodeURI(url), '_blank', 'location=yes');
ref.addEventListener('loadstop', function (event) {
if (event.url.match("close")) {
$scope.$apply(function () {
$scope.refreshGamePage = 1;
});
ref.close();
}
});
}
Related
Hi I am trying to create an angular asyncValidator but I think I am doing something wrong becausse it does not get executed.Here is my code:
(function () {
'use strict';
angular
.module('project')
.directive('imageValidator', imageValidator);
imageValidator.$inject = ['utilitiesService', '$q'];
function imageValidator(utilitiesService, $q) {
var directive = {
restrict: 'A',
require: 'ngModel',
link: link,
};
return directive;
function link(scope, element, attrs, ngModel) {
ngModel.$asyncValidators.imageValidator = function (url) {
var deferred = $q.defer();
if (url) {
var image = new Image();
if (utilitiesService.isNotExternalFile(url)) {
image.src = utilitiesService.getUrl(url)
} else {
image.src = url;
}
image.onload = function () {
deferred.resolve(true);
scope.$apply();
}
image.onerror = function () {
deferred.reject(false);
scope.$apply();
}
} else {
deferred.resolve(true);
}
return deferred.promise;
}
}
}
})();
The code gets executed oance but it does not get executed when I change things in the input.
When it first gets executed it sets the class ng-valid-image-validator which is correct I want it to be valid if there is nothing in the input.
But when I write something in the input ng-valid-image-validator gets removed but it does not add the ng-invalid-image-validator and I asume this happens because the custom validator code does not get executed.
Does anyone have any ideeas what I am doing wrong?
EDIT : I just noticed that the validator gets executed again if emptying the input.
I have a gallery of images which each pull in related data. I've made a directive to lazy load the images once they are in view. It works well, but each of the directives continues watching for the scroll event, with around 200 of them, it's a lot of events being fired unnecessarily. Is there a way to remove the directive, or disable it?
app.directive('lazyLoadGallery', function(resourceService, $rootScope){
return{
link: function (scope, element, attrs) {
var isLoaded = false;
$('.issue-gallery').on('scroll', function(){
console.log($rootScope.number);
if((attrs.lazyLoadGallery/10) % 1 === 0 && !isLoaded) {
if($(element).visible()){
isLoaded = true;
resourceService.issueListPages.list({number:$rootScope.number}).$promise.then(function(data){
$rootScope.issueList = $rootScope.issueList.concat(data.results);
$rootScope.number ++;
$(element).removeAttr('lazy-load-gallery');
});
};
}else{
$(element).removeAttr('lazy-load-gallery');
}
})
}
}
});
my attempt was to remove the attribute from the DOM. Even though it is removed the directive still is watching for scroll events and working as if it wasn't removed.
I was unable to $destroy listeners on the parent object without eliminating it's event for all directives. I came up with a name spaced event which cleans up listeners.
app.directive('lazyLoadGallery', function(resourceService, $rootScope, $compile){
return{
controller: function($scope, $element, $attrs) {
var isLoaded = false;
angular.element('.issue-gallery').on('scroll.'+ $scope.$id, function () {
if (($attrs.lazyLoadGallery / 10) % 1 === 0 && !isLoaded) {
if ($($element).visible()) {
isLoaded = true;
resourceService.issueListPages.list({number: $rootScope.number}).$promise.then(function (data) {
$rootScope.issueList = $rootScope.issueList.concat(data.results);
$rootScope.number++;
angular.element('.issue-gallery').off('scroll.'+ $scope.$id);
});
}
;
} else {
angular.element('.issue-gallery').off('scroll.'+ $scope.$id);
}
})
}
}
});
The angular documentation states that the return of $on function is
Returns function() Returns a deregistration function for this
listener.
So in your case just assign it to a variable and call it when you don't need it anymore.
var deregister = $scope.$on('something', function() {
if (success) {
deregister();
}
});
This question already has answers here:
Controller Required By Directive Can't Be Found
(2 answers)
Closed 7 years ago.
I have 2 directives that I want to share functions between, so I figured I would create a parent directive.
I did it like this:
.directive('kdAlert', function () {
return {
restrict: 'A',
scope: {
},
link: function (scope, element) {
// Set our dismiss to false
scope.dismiss = false;
// Have to use a watch because of issues with other directives
scope.$watch(function () {
// Watch the dismiss
return scope.dismiss;
// If the value changes
}, function (dismiss) {
// If our value is false
if (dismiss === false || dismiss === 'false') {
// Remove the class from the element
element.removeClass('ng-hide');
// Else, if the value is true (or anything else)
} else {
// Add the class to the element
element.addClass('ng-hide');
}
});
// Get our buttons
var buttons = element.find('button');
// Binds our close button
self.bindCloseButton = function (callback) {
// If we have a button
for (var i = 0; i < buttons.length; i++) {
// Get our current button
var button = angular.element(buttons[i]);
// If our button is the close button
if (button.hasClass('close')) {
// If the button is clicked
button.on('click', function (e) {
console.log('clicked');
// Prevent any default actions
e.preventDefault();
// Callback
callback()
// Remove our element
element.remove();
});
}
}
};
}
};
})
.directive('cookie', function () {
return {
restrict: 'A',
require: 'kdAlert',
templateUrl: '/assets/tpl/directives/cookie.html',
link: function (scope, element, attr, controller) {
// Dismiss the alert
scope.dismissAlert = function () {
// Set our cookie
scope.dismiss = $cookies.dismissCookieAlert = true;
};
// Bind our close button
scope.bindCloseButton(scope.dismissAlert);
}
};
})
.directive('newsletter', function () {
return {
restrict: 'A',
require: 'kdAlert',
controller: 'NewsletterController',
templateUrl: '/assets/tpl/directives/newsletter.html',
link: function (scope, element, attr, controller) {
// Saves our email address
scope.subscribe = function (valid) {
// If we are not valid
if (!valid) {
// Return from the function
return;
}
// Subscribe
controller.subscribe(scope.email);
};
// Dismiss the alert
self.dismissAlert = function () {
// Set our cookie
self.dismiss = $cookies.dismissNewsletterAlert = true;
};
// Bind our close button
scope.bindCloseButton(scope.dismissAlert);
}
};
})
The newsletter has a controller also, which just looks like this:
.controller('NewsletterController', ['$q', '$cookies', 'SubscriberService', 'toastr', function ($q, $cookies, service, toastr) {
var self = this;
// Saves our email address
self.subscribe = function (email) {
// Create our deferred promise
var deferred = $q.defer();
// Subscribe
service.subscribe(email).success(function () {
// If we succeed, display a message
toastr.success('You will now recieve occasional newsletters.');
// Resolve our promise
deferred.resolve();
});
// Return our promise
return deferred.promise;
};
}])
but when I run my application I get an error:
Controller 'kdAlert', required by directive 'newsletter', can't be found!
does anyone know how I can get it to work?
You have to modify require: 'kdAlert', to require: '^kdAlert', and add a controller to your kdAlert in order to make the require work, require will try to find the controller of the kdAlert directive and pass it as a parameter to the directive link function.
I have a service method and it will change the value of a boolean variable (false is default value) and return back to controller.
Am calling this service method by clicking on a button.
Consider, am clicking this button and now the variable value is true.
now, am accessing this same service method from another one controller and it is false.. why?
Whats wrong?
first controller,
.controller('myController1',....
$scope.value = false;
$scope.buttonClick = function(){
$scope.value = myService.setValue(value);
}
second controller,
.controller('myController2',.....
$scope.value = myService.getValue();
service,
angular.module('myModule', [])
.service('myService', ['OtherTypes',
function (OtherTypes) {
var myServiceVariable = false;
return {
setValue: function (value) {
myServiceVariable = !value;
return (myServiceVariable);
},
getValue: function () {
return myServiceVariable;
}
}
}
]);
Looks like you have a typo: you're separating the two functions with a , and not a ;. Change to:
myServiceVariable = false;
setValue: function (value) {
myServiceVariable = !value;
return (myServiceVariable);
};
getValue: function () {
return myServiceVariable;
};
}
Also, since you're getting the value in the 2nd controller as a return value from a function and not a direct reference to the service variable itself, don't expect it to update automatically. You'll have to call the getValue() function everytime.
hi the following code should show that services are singleton in angularjs.
myApp = angular.module("myApp",[]);
myApp.service("myService", function(){
myServiceVariable = false;
return {
setValue: function (value) {
myServiceVariable = value;
return (myServiceVariable);
},
getValue: function () {
return myServiceVariable;
}
}
});
myApp.controller("controller1", function($scope, myService){
console.log(myService);
$scope.clickHandler = function(){
myService.setValue(!myService.getValue());
}
});
myApp.controller("controller2", function($scope, myService){
console.log(myService);
$scope.getServiceValue = function(){
return myService.getValue();
}
});
For a working demo you can go here
I have the following directive, service and controller inside my AngularJS app. The service is common between the directive and this controller (as well as other controllers using the same service in my app). As shown inside the controller I watch the service for changes, while in directive I communicate with the service to update it. For some reason which I don't know the directive is not updated my service, so can someone please tell me what I am doing wrong here? Thanks
Controller:
myapp.controller('ClientsCtrl', function ($scope, UserSvc) {
$scope.showForm = UserSvc.frmOpened;
$scope.$watch(function () {
return UserSvc.frmOpened;
}, function () {
$scope.showForm = UserSvc.frmOpened;
console.log('Changed... ' + $scope.showForm);
});
});
Service
myapp.factory('UserSvc', function ($log, $q, $http) {
return {
frmOpened: false
};
});
Directive:
myapp.directive('myDirective', ['UserSvc', function (UserSvc) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
angular.element(element).on("click", function () {
var parentElement = $(this).parent();
if (parentElement.hasClass('sample')) UserSvc.frmOpened = true; //This code never update the service
} else {
UserSvc.frmOpened = false; //This code never update the service
}
return false;
});
}
};
}]);
.on() is a jQuery method (also included in Angular's jqLite). The code inside the attached event handler lives outside of Angular, so you need to use $apply:
$apply() is used to execute an expression in angular from outside of
the angular framework. (For example from browser DOM events,
setTimeout, XHR or third party libraries). Because we are calling into
the angular framework we need to perform proper scope life cycle of
exception handling, executing watches.
For example:
element.on("click", function() {
var parentElement = $(this).parent();
scope.$apply(function() {
if (parentElement.hasClass('sample')) {
UserSvc.frmOpened = true;
} else {
UserSvc.frmOpened = false;
}
});
return false;
});
Demo: http://plnkr.co/edit/mCl0jFwzdKW9UgwPYSQ9?p=preview
Also, the element in the link function is already a jqLite/jQuery-wrapped element, no need to perform angular.element() on it again.
It looks like you have some brackets where they shouldn't be in your directive. You don't have brackets surrounding the first part of your if statement, but you have a closing bracket before your else. I think this messes up things.
Try using this as your link-function and see if it changes anything:
link: function (scope, element, attrs) {
angular.element(element).on("click", function () {
var parentElement = $(this).parent();
if (parentElement.hasClass('sample')) {
UserSvc.frmOpened = true; //Surrounded this with brackets
} else {
UserSvc.frmOpened = false;
}
return false;
});
}