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

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);

Related

$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.

Cannot read property 'vibrate' of undefined [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
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.

How to display form submission status in AngularJS [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I started to look into Angular JS and find this framework great so far.
I have a question about form submission best practices though.
I have an update data form which has ng-controller and ng-submit directives, it loads data from the server using get on load and posts data on submit.
My question is when a user clicks submit button how do I indicate that something is actually happening? E.g. display activity indicator while the action is being processed and some kind of success or failure message after it was processed.
I used jQuery to do this for ajax forms before, do I still use jQuery or there are other tools for that in Angular JS I don't know about?
Thanks
Working with AJAX promises in angular is much straight forward. Have a look at this post. While your request is being processed, you could show a loading icon/text whatsoever:
$scope.loading = true;
$http.post("http://example.appspot.com/rest/app", {"foo":"bar"})
.success(function(data, status, headers, config) {
$scope.data = data;
$scope.loading = false;
}).error(function(data, status, headers, config) {
$scope.status = status;
$scope.loading = false;
});
Then just hide and show whatever indicates your loading status:
<p ng-show="loading">LOADING</p>

Backbone Views and webshims for form values [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
What is the best way to make use of webshims in a backbone project? Is there a way to avoid using it globally and only loading it for a specific view?
Yes this is possible. But I would always include the modernizr and polyfiller.js in the base setup.
In case you are doing this you should configure at least waitReady and basePath:
webshims.setOptions({ waitReady: false, basePath: "/js/libs/shims/" });
Your code for your view could look like this:
Backbone.View.extend({
initialize: function(){
//Load webshims
webshims.polyfill('forms forms-ext mediaelement');
},
render: function() {
this.$el.html( this.template(this.model.attributes) );
//update new created elements
this.$el.updatePolyfill();
return this;
}
});
Normally webshims delays jQuery's 'ready' event until all features are implented. In case you want to use webshims only in a specific view you can't delay it. In case you want to use the polyfilled JS/DOM API. You should wrap your JS code, which uses those APIs in a webshims.ready callback:
render: function() {
var thisObject = this;
this.$el.html( this.template(this.model.attributes) );
//update new created elements
this.$el.updatePolyfill();
//wait until video API is implemented and then use it
webshims.ready('mediaelement', function(){
$('video', thisObject.$el).play();
});
return this;
}
In case you want to speed up things, you can load it inside your view and after window.load:
$(window).on('load', function(){
//preload after onload
webshims.polyfill('forms forms-ext mediaelement');
});
This way webshims is loaded either as soon as the view starts to initialize or after onload. webshims might give you a warning in this case, that you have called it twice, but this won't hurt.

AngularJS: Correct way to define a model? [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 9 years ago.
Improve this question
I am trying to find the best way to define a model. I have set my ng-model to
model.test
and sure enough it seems to work, I did a standard
alert($scope.model.test);
Do I always have to refer to it has $scope?
So when do I need to set this up in the controller i.e.
$scope.model ={};
If I want to populate from the controller I can setup something like
$scope.model = {name: 'test', age: 56};
but what if I would like to create the model ensuring that it had only "name" and "age" set has available properties but containing NO VALUE?
Is it normal to have the model created directly on the scope? Can I not have my models created separately in a file?
As you can see I have it working, but I am not sure which way I should be going.
$scope.model = {};
$scope.model.name = ''; // default value
$scope.model.age = ''; // default value
Then you can modify it like this:
$scope.model.name = 'test';
$scope.model.age = 56;
Or add more attributes:
$scope.model.foo = 'bar';

Resources