How can I log the value of the input field to the console whenever it changes - angularjs

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

Related

AngularFire: Saves Once, Stops Saving

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

angular js template with routing and translate refusing to work

I am new to angular and it seems very interesting
I am creating a template for a promotional page and struggling to understand what is causing an issue on it - half of the script stopped working...
My fiddle is in here see >
fiddle example
or Plunker
I have working example without route...
Can you advice me how to fix this issue please
First of all, i'd suggest you to separate your project to different files based on best practises
Secondly, 'config, controller, factory' etc are methods of angular.module object. So you need to retrieve it first like
angular.module('<moduleName>').config(...)
or use some variable.
http://plnkr.co/edit/CK5R2cS7Zd9T9Kun9Epc?p=preview

Tricky angularjs situation. Cannot see scope values in html

Hi I'm having a strange problem. I'm not able to plunker it, so I will just try to explain and maybe someone has had the same problem or can give me a hint to where to search.
I've been setting up an angular app with some tests in webstorm. I only test services. Then, when I wanted to build the html layer on top, I can't get the html to bind with the controllers. I don't get any errors in the console, the routing works, text in the html file is displayed, and "console.logs" in the controller prints out all scope values correctly. Even custom directives work and the passing of attribute values to them.
However, all databindings in the html do not work. Wherever {{name}} and such is in the html file, nothing is displayed. The same goes for directives. Even though the "console.log(scope)" in the directive shows that the attributes have been set correctly.
Another strange thing is that I cannot write in input fields.
I really have no clue as I've checked every thing I could think of. I'm using webstorm 7.0, AngularJS v1.2.0rc1 and I'm using the "open in browser" in Webstorm.
This is working in other projects I'm making, so I'm really wondering what's going on here.

Angularjs: Multiple file-uploader in a single page

I am facing lot of problem in while using more than 1 file uploader in single page. There is any directive for this? because I didn't find it. By the way I am using Bruno Angularjs uploader Directive and tried to change multiple but getting problem while form submitting beacause all uploaders sharing same model so thats why I was not able to get all the values at a time only one can be access.
So if anyone have some solution or suggestion for this, please share with me.
There is a good jquery ajax uploader which is available in angualar js version also.
Please check here http://blueimp.github.io/jQuery-File-Upload/angularjs.html

Adding an ng-click event inside a filter

I'm fairly new to Angular but I've been using it the past few weeks and have managed to work out most of the problems I've come across. This one however has me stumped.
I have an app that pulls in tweets from Twitter then - using an angular filter - pulls out all the urls and styles them as links. This part works fine but the client decided that links from Twitter were't safe so they wanted a disclaimer to fire every time a link was clicked. Simple enough - I hijacked the link and swapped the href for an ng-click="openLink('url')". This is where the problem occurred - the ng-click doesn't work.
I'm pretty sure the problem has something to do with $compile() - I've had similar issues before - but I have no idea when or where to call it.
I've created a Plunkr that is a lite version of what I'm after. The link at the top isn't loaded in dynamically and fires the alertUrl() function fine, but all the links generated by the filter fail.
I'm probably missing something really simple but it's been bugging me a while now so any help will be massively appreciated.
Thanks,
Sam
Well you are correct that the html\content that you emit needs to be compiled for angularjs to resolve the alert function.
I have changed your plunker, and inject a compile directive (from here)
See it in action here
The basic idea here is to compile the content produced from twitter feed dynamically.
<p compile="tweet.text | convertLinks"></p>

Resources