I'm using AngularFire in my Ionic/Angular web app.
I'm using the $firebaseObject.$bindTo() method to bind to one of my objects and setup 3-way binding.
Whenever I modify the $firebaseObject the FIRST time, that change is synced to the Firebase database. However, any subsequent modifications to any of the properties in my $firebaseObject will not be updated in the Firebase database. The view will still update correctly, but nothing is pushed to Firebase.
I've tried calling $save() manually, but it doesn't do anything.
I tried unbinding and rebinding after each change, and that doesn't do anything either.
The code isn't really setup to show a simple example here, but does anyone have any debugging tips or clues as to what might be causing this?
Maybe you use it in a wrong way.
I have just tested this code and 3-way binding works fine.
var obj = $firebaseObject(rootRef.child('pathToChildRef'));
obj.$bindTo($scope, 'myVariable');
Checkout the following link for more info.
https://github.com/firebase/angularfire/blob/master/docs/reference.md#bindtoscope-varname
Related
I'm experimenting with the angularjs phonecat tutorial (I'm at step 5) to better understand how angular works. But I fail to manage to log the value of the input field to the console. I tried different approaches, but none of them are working.
How can I access the $ctrl.query variable, and log it whenever it changes? Do I use $watch?
I hope somebody can show me how it is done and maybe explain in detail why and how it is working.
Ok, I seem to have found a solution. I added this to the controller of the phoneList component.
Learning Angular is really not that easy ^^.
I have done a simple SPA with AngularJS/signalR that send a notification to my hub Hello when the app starts.
On the client side I have list of notifications managed by a controller. This list got updated only once whereas I have been able to see that my callback is called every time thanks to the console.log (and the debugger shows that this.messages grows at every notification received).
I don't get why the UI only update on first call (which the one the current client have emittted)
Here is the code that work only once.
NotificationCtrl.prototype.hello = function() {
console.log("hello");
this.messages.push(new Notification("Tom", "Now", "Is now connected"));
}
You need to $scope.$apply because the callback is not scope aware since its not called from angular.
I think you would benefit alot from my library called SignalR.EventAggregatorProxy
Its designed around the Event aggregation pattern and is perfect for MV* enabled sites with Knockout or Angular.
Have a look at the wiki for setting it up
https://github.com/AndersMalmgren/SignalR.EventAggregatorProxy/wiki
Demo project
https://github.com/AndersMalmgren/SignalR.EventAggregatorProxy/tree/master/SignalR.EventAggregatorProxy.Demo.MVC4
Recent blog post I did about it
http://andersmalmgren.com/2014/05/27/client-server-event-aggregation-with-signalr/
Install using nuget
Install-Package SignalR.EventAggregatorProxy
Im trying to share data between 2 views. I need to use the 2 views at the same time on two different machines. One is controlling the other(ex: a counter) 1st view has next(+1) and the other just displays the result. I want the data to synchronized/binded. I do not want to have to refresh the 2nd page or to have to pull data with a timer or otherwise.
My idea was to use ng-view and routeProvider, I know that when the view changes the scope is cleared so I tried to use a parent controller/scope, the data is shared but I have to refresh the page on my 2nd view. I tried a service, same thing. I tried to $watch the result of the service but on the second controller/view no event is picked up so the view doesn't update.
what is the way to go? I was thinking about broadcasting or emit a custom event and trying to catch it, will that work? Am I just not binding to the service correctly? Would ui-router work better? I feel there should be an easy way to do this.... Im not seeing it! Please help if you can.
One of the simplest (in my opinion) implementations of client-client communication is using WebSockets. While that does have compatibility limitations (some browsers), that can easily be overcome by using a library like socket.io. Also, it's easy to write an Angular wrapper/service over socket.io that can be shared across components of your app, or even different modules.
It's also pretty simple to write a Node backend with socket.io
This might be a good read.
I would suggest you to focus on pushing stream rather than sharing it. Some how you need to push stream to second view which is changes in first view.
You may want to check this
Is there some way to PUSH data from web server to browser?
I have a nontrivial Angular SPA that uses ui-router to manage multiple views, many of which are visible at the same time. I need models to be visible across controllers, so I have services written that allow me to have controllers pull down fresh copies of model data that has been updated.
I apologize in advance for the length of the question, but I will state the problem then state what I have done to address issues I'm sure others in the Angular community have struggled with.
I believe my problem is not understanding the lifecycle of controllers / views, because I get behavior where a controller initializes correctly the first time I go there, but then seems to never run again, even when I navigate to it using something like $state.go("state name").
In one view (contrived example), I show a summary of information about a customer, and in another view I allow a user to update that customer's more detailed profile. I want a user to edit, say, the customer last name in the detailed view, and have the summary view automatically recognize the change and display it.
I have a fiddle that shows 3 views and a simple password changing Service. The flow goes like this:
You can see each view gets initialized and displays the initial password retrieved from the service. All views are in sync with the DataService.
The middle view allows you to enter a new password and change the one stored in the service. Console logging confirms that the service picks up the new password just like you would expect.
(odd behavior #1) When the DataService receives the new password, I would expect the other 2 views (top and bottom) to display the new one. They don't... they still display the initial password.
There is a button to allow a user to go to another state via $state.go("state name") (a child state of the original) which also retrieves the password and displays it. This works the first time (see #5). Now the top view shows the outdated password, the middle view shows the new one, and the bottom one shows the new one as well. This seems normal, since the new view is invoked after the DataService contains a new password value.
(odd behavior #2) If I click back in the middle view and change the password again, and click the button to change states again, the bottom view (which updated just fine in step #4) no longer updates its copy of the password. Now all 3 views show different passwords, even though I am using a single service to pass values between controllers as suggested pretty much everywhere you look for Angular best practices.
Some possible solutions:
Tim Kindberg has an excellent slideshow here that seems to recommend using ui-router's state heirarchy to "pass" data among views that need to pick up values from other views. For a smaller-scale app I think I would settle on this, but I expect our application to have 30+ views displaying data from over 100 REST endpoints. I don't feel comfortable maintaining an application where all the data is being shared by a complex inheiritance tree. Especially using a routing framework that is at version 0.2.8.
I can use events to have controllers listen for changes in the data model. This actually works well. To accommodate performance concerns, I am using $rootScope.emit() and a $scope.$onRootScope('event name') decorator I found on here. With this approach I am less concerned about event performance than I am about wiring this huge app with a bunch of event listeners tying everything together. There is a question about the wisdom of wiring a large app using angular events here.
Using $watch on the value in the DataService? I have not tried this but I am hesitant to hinge an app this size on hundreds of $watches for performances reasons.
A third-party library like bacon.js (or any of a dozen others) that may simplify the event spaghetti, or create observable models that my controllers can watch without the risk of $digestageddon. Of course, if there is a concise way to handle my issue using Angular, I'd prefer not to muddy the app with 3rd party dependencies.
Something that lets controllers actually reference .service modules by reference, so I don't have to depend on tons of event wiring, complex state hierarchies, 3rd party libraries, or seeding the app with hundreds of $watches and then kicking off $digests to update controllers' references to Angular services?
Some solution that relies on time-tested OO and design patterns and not a 3rd-party library or framework that has a version that starts with 0.*.
Thanks in advance... I appreciate the help!
This is no problem of ui.router. If you intend for your model (your data service) to be a single source of truth, you have to refrain from destroying it.. err.. the reference to it that is. And in your case, assigning a primitve (a string) directly to the scope, instead of a reference to it. In other words...
var password = {pw:'initial value'};
and then later setting/binding only on
password.pw = newpassword
{{password.pw}}
Heres a fiddle. And also here is a short little read on scopes, It also includes a video of an angular meetup where Misko talks about "always have(ing) a dot in your model" link and how the $scope is a place to expose your model, not be your model. (aka not a place to assign primitives like password = 'initial value')
Hope this helps!
try remove the animation property of your ion nav view.
remove the property
animation="slide-left-right"
it would be ok.
Our server saves the model, and returns the JSON as specified in the doc. The problem is, backbone.js issues PUT as soon as it receives response. Can it be because the model is sent without _id property, and the server appends that to a model?
If you believe that Backbone automatically issues a PUT based on the response to a previous request, you are confused. Backbone does no such thing. If you a see a PUT going over the wire, something in your code base (an event binding or otherwise) is calling either save on a model or a manual sync.
Otherwise, you'll need to post code in order for us to help you debug, but I can assure you backbone itself will not ever issue a network request that is not triggered by external code through one of a very small set of methods such as fetch, save, or sync.
As to IDs on the server, that should be perfectly fine. In fact, if backbone were to get confused and think that an existing model was a new model, it would issue a POST instead of a PUT, which is not what you are seeing.