Cannot read property 'vibrate' of undefined [closed] - angularjs

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Now i'm using ng-cordova vibrate plugin using ionic but it's not working for me. it shows the error Cannot read property 'vibrate' of undefined in console log.
Could you tell me how to use the plugin? please try to find out the good solution for me. thanku.

well, how would you like to, your computer to vibrate ? right ? It will not work on you PC, console log will says Cannot read property 'vibrate' of undefined as you plugin is not running, this will work only on mobile devices !!

I'm using local notification in my app so i want when every notification i get vibrate alert.
my app run function
app.run(function($ionicPlatform,$cordovaVibration) {
$ionicPlatform.ready(function() {
$cordovaVibration.vibrate(400);
});
})
vibrate on off controller:
app.controller('VibrationCtrl', function ($scope, $ionicPlatform, $cordovaVibration) {
$scope.cancelVibrate = function(vibrate){
if(vibrate == true){
$ionicPlatform.ready(function(){
$cordovaVibration.vibrate(400);
})
console.log('Vibrate Enable');
}else{
$cordovaVibration.cancelVibration();
console.log('Vibrate Disable');
}
}
})
please find out the good solution. thanku.

Related

How to write resolve service in $stateProvider in angularjs? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I need to resolve a service while routing to other state using State Provider in angular.
You can use resolve object in $stateProvider while routing to other state.
For Example :
resolve: {
resolvedTheme: ['ThemeService', function (ThemeService) {
return ThemeService.get();
}]
}
Here:
Resolve is a service name and this is returning a callback function.

$scope.$on fired 3 times [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I have 2 different angular controllers and one of it having broadcast like this
$timeout(function() {
if($scope.modal){
$rootScope.$broadcast(DATAINPUT_EVENT.REFRESH_COMPLETED_DATA_LIST,id);
$scope.modal.hide();
$scope.modal.remove();
}
}, 3000);
And in another controller I am catching broadcast.
$scope.$on(DATAINPUT_EVENT.REFRESH_COMPLETED_DATA_LIST,function(event,id){
// some action
});
Problem is $scope.$on function getting called 3 times. I have referred
AngularJs broadcast repeating execution too many times and
Angular - broadcast , $on called multiple times in directive
but could not get solution using them. Please help me out...!!
Quick and dirty hack: use a boolean flag
var once = true;
$timeout(function() {
if($scope.modal){
$rootScope.$broadcast(DATAINPUT_EVENT.REFRESH_COMPLETED_DATA_LIST, {id: id, once: once});
$scope.modal.hide();
$scope.modal.remove();
once = false;
}
}, 3000);
and in your listener:
$scope.$on(DATAINPUT_EVENT.REFRESH_COMPLETED_DATA_LIST,function(event,args){
if(args.once)
// some action, only the first time
});
Bear in mind this is (dirty, but still) solution only if you can't find why your broadcast it's called 3 times every event.
To fix issue for a moment, I did something like follows,
if(!$rootScope.$$listenerCount[DATAINPUT_EVENT.REFRESH_COMPLETED_DATA_LIST]){
$scope.$on(DATAINPUT_EVENT.REFRESH_COMPLETED_DATA_LIST,function(event,id){
// some action
});
}
But very soon I found I have initialized my controller multiple times and I have taken corrective actions to remove the multiple declarations of controller.

Ecommerce website not taking custom variables {{ }} [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm watching this video tutorial on building an e-commerce site with Angular and Moltin. I've gotten to the 19 minute mark where he begins creating the product.html view.
I'm not sure why, but I can console.log(product) just fine, but when I try to use variables like {{ product.title} in my product.html view, it doesn't show. Plain text shows up fine, and in my category.html view I can get my categories to ng-repeat using {{ category.title }} just fine.
I am not sure why I can log the product object, but the view will not render it.
Here's a link to my GitHub repo. Any help is appreciated.
There is a scope conflict being caused because you are declaring product to be your controller with the controllerAs statement here, and then setting $scope.product in your controller here
You need to resolve this conflict by either renaming $scope.product to something else in the controller, or renaming your controllerAs: 'product' statement.
I was able to make this work by changing controllerAs:'product' to controllerAs:'prod', but any solution resolving the conflict between the variable names should work.
Could you provide any snippets or a fiddle of when you initialize products? Just from glancing at the video it seems that the promise from your ProductCtrl might not be fulfilled by the time you are invoking the console.log(); What value are you getting when you console.log()?
Also, although this doesn't seem to be the issue- I have seen the same issue when binding to primitive types!
A simple check could be trying to instantiate the product to an empty object: $scope.product = {}; somewhere in the same context BEFORE you are setting to new value- that way angular's magic will know to watch and bind that object in the digest cycle.

How to insert angular js code?

I'm actually doing an app for a stage, which has to be responsive design. So it has to work on Mobile, Computer and Tablet. For this app I need to use the google api Place Autocomplete. The problem with that is that it doesn't work on mobile, whether it's iOS or android... on another forum i found a piece of code which is the following, supposed to resolve this problem :
.directive('disableTap', function($timeout) {
  return {
    link: function() {
      $timeout(function() {
        // Find google places div
        _.findIndex(angular.element(document.querySelectorAll('.pac-container')), function(container) {
          // disable ionic data tab
          container.setAttribute('data-tap-disabled', 'true');
          // leave input field if google-address-entry is selected
          container.onclick = function() {
            document.getElementById('autocomplete').blur();
          };
        });
      },500);
    }
  };
});
The problem is that i've never used Angular JS in my life and i do'nt have the time to learn it now, maybe after i'm done with the app... and this function is supposed to make it works on mobile, but i don't know how to use it. Could you guys give me a hand and explain me how to insert this code in my project and how to use it? I'm really in need and some help would be very appreciated. by the way, i'm not english native so if you didn't udnerstand something in my post just tell i'll try to say it better ^-^
I hope you will be able to help me, thanks :)
This should be the same in jQuery, but you have to adapt it yourself. You require also the underscore.js library. Hope this helps.
window.setTimeout(function() {
// Find google places div
_.findIndex($(document.querySelectorAll('.pac-container')), function(container) {
// disable ionic data tab
container.setAttribute('data-tap-disabled', 'true');
// leave input field if google-address-entry is selected
container.onclick = function() {
$('#autocomplete').blur();
};
});
},500);

unbootstrap after angular.bootstrap has been initiated? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Having trouble trying to recompile angular app.
Is there a way to unbootstrap after calling angular.bootstrap?
Once I do angular.bootstrap when already bootstrapped, causes errors
Thanks!
It does not seem like angular was designed to do this, and I can't think of any good reason why you would want to (but maybe you do). That said, from looking at the angular.js source code
it seems like the only way that this could work would be to remove the element you originally bootstrapped from the DOM and then re-add it and then try bootstraping again.
Here's a jsfiddle proof of concept that bootstraps a super simple app and then after 5 seconds bootstraps itself again. I'd be extremely hesitant to do something like this on a complex app but it does seem to work.
var bootstrapApp = function(appDiv) {
var isSecondTime = false;
if (appDiv) {
document.body.removeChild(appDiv);
isSecondTime = true;
}
appDiv = document.createElement('div');
appDiv.id = "myApp";
appDiv.innerHTML = (isSecondTime ? ' 2nd bootstrap': ' 1st bootstrap') + template.innerHTML;
document.body.appendChild(appDiv);
angular.bootstrap(angular.element(appDiv), ['myApp']);
return appDiv;
}
var createdAppDiv = bootstrapApp(null);
setTimeout(function() {
console.log("try boostraping again");
bootstrapApp(createdAppDiv);
}, 5000);

Resources