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.
Related
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.
This question might best be served by showing 2 JSFiddles examples (issue occurs in the 2nd JSFiddle link).
So I was playing with an example in Angular where I go through questions in my app, and when you get to a certain question called 'QS_SEARCH', then it autosubmits the question after 3 seconds.
I added some simple functionality so pretend now you are on the last question 'QS_SUCCESS' and if you clicked back to the 'QS_SEARCH' question, then the autosubmit timeout now gets initiated again... but if you click Back one more time quickly before the $timeout func runs, then when function executes it realizes the user isn't on 'QS_SEARCH' anymore and doesn't autosubmit. This is working correctly.
http://jsfiddle.net/armyofda12mnkeys/wxLqv4cs/
Now the same example with ui-router seems to hold the old $scope value and will still autosubmit even if you clicked Back to 'QS3' pretend, which is incorrect.
How can the $timeout get the updated scope so it doesn't autosubmit when you aren't on that specific question? I even tried $scope.$apply() inside the $timeout function but it still doesn't get the latest value.
http://jsfiddle.net/armyofda12mnkeys/qrp6cjgv/
Is this a Closure issue? I thought though $scope would be updated though.
Here is code for the $timeout:
if($scope.currentquestion.qid == 'QS_SEARCH') {
console.log('TIMEOUT: FUNC WILL START IN 3s');
$timeout(function(){
//$scope.$apply(); //update current question, not working though
console.log('3S DONE: FUNC EXECUTING');
console.log('current question is:'+ $scope.currentquestion.qid);
if( $scope.currentquestion.qid=='QS_SEARCH' ) {//double-check to make sure stilll on this question!!! (where issue occurs)
console.log('STILL on QS_SEARCH so autosubmit!');
$scope.getnextquestion();
}
}, 3000);
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
In angular when using resources we can bind them directly on the $scope like this:
$scope.users = Users.$query();
This could also written as:
Users.$query().$promise.then(function(users) {
$scope.users = users;
});
Have you experienced any downside of using the first approach? What are the pros and cons of each?
From angular ng-book:
$resource Instances Are Asynchronous
With all these methods, it’s important to note that when they are
invoked, the $resource object immediately returns an empty reference
to the data. This data is an empty reference, not the actual data, as
all these methods are executed asynchronously. Therefore, a call to
get an instance might look synchronous, but is actually not. In fact,
it’s simply a reference to data that Angular will fill in
automatically when it arrives back from the server.
// $scope.users will be empty
$scope.users = User.query();
We can wait for the data to come back as expected using the callback method that the methods
provide:
$scope.users(function(users) {
// logic here
});
or use raw $http from $promise attribute
$scope.users.$promise.then(function(users) {
// logic here
});
Both approaches are essentially equivalent.
The main difference between them is that in the 2nd approach, you will be able to perform certain actions once the request completes, whereas in the 1st approach, to be able to run logic when the request completes, you'll need to work with $watch statements on the users variable.
The 1st approach however, will allow you to place default values inside user which could be convenient when binding view before the request completes.
By the way, there is also a 3rd option:
$scope.users = Users.$query();
$scope.users.$promise.then(function(users) {
// perform some logic
});
This allows you to immediately bind views to the users variable in the scope, and at the same time, perform any additional logic you might need once the request completes.
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);
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 8 years ago.
Improve this question
As an angularJS newbie, I am puzzled by the fact I have to bind to a function returned from the service to update the view, not the data itself, I couldn't find any official document explaining this, Does anyone know why?
JSFiddle Code Sample
<div ng-controller="MyCtrl">
binding to a function works!
<p ng-bind-html-unsafe="tempLog.returnBuffer()"></p>
<br><br>
bind to the service variable: Doesn't work, why?
<p>log={{tempLog.buffer}}</p>
<br><br>
bind to scope var instead of service var, still doesn't work
<p>log={{logBuffer}}</p>
bind to a scope var which points to the service Function, works!
<p>log={{pLogFunc()}}</p>
<button ng-click="addText('more')">Trace</button><br>
</div>
JS code
var myApp = angular.module('myApp',[]);
myApp.factory('myLog', function() {
var internalBuffer = "";
return {
buffer:internalBuffer,
trace:function(input){
internalBuffer = internalBuffer + "<br>" +input;
buff = input;
},
returnBuffer:function(){
return internalBuffer;
}
}
});
function MyCtrl($scope, myLog){
$scope.tempLog = myLog;
$scope.logBuffer = myLog.buffer;
$scope.pLogFunc = myLog.returnBuffer;
myLog.trace("aaa");
$scope.addText = function(str){
myLog.trace(str)
}
}
This is not an AngularJS binding problem, this is just how javascript works.
In your service:
1 buffer is assigned to a primitive variable internalBuffer.
2 trace() accepts a parameter that changes the internalBuffer primitive
3 returnBuffer() returns the internalBuffer primitive
Since trace() changes the internalBuffer primitive, any binding to buffer does not affect the changes in the internalBuffer, furthermore, returnBuffer() returns the value of the internalBuffer so naturally the changes you made with the trace() function affects the return value of the returnBuffer() function.
Any of these suggestions may work on your end:
[1] If you want to bind from the buffer property of your myLog service, then change your trace() function to something like this:
trace:function(input){
this.buffer = this.buffer + "<br>" +input;
}
[2] You may disregard the buffer property and solely use the returnBuffer() if youdon't want to expose yourinternalBufferand only use thetrace()to have access in changing theinternalBuffer`
[3] You can use both, the buffer property provides access to another buffer format while the internalBuffer holds all the private buffers / format / or anything else that you may not want to expose to the users of the service. Just be sure to update the buffer in your trace() function by using this as well.