ng-click does not fire javascript global function - javascript

I'm new to AngularJS, and I've put an ng-click on a radio button generated by
ng-repeat, and the click event refuses to fire. If I use a simple onclick,
that does work though.
This works, and I see the alert:
<div class="span2 left-justify"
ng-repeat="choice in physicalmode_choices">
<input type="radio"
name="physical_layer"
value="{{ choice.private }}"
onclick="alert('foo')"
required
ng-model="$parent.networkoptions.physicalmode" />
<span ng-bind="choice.public"></span>
</div>
But this does not:
<div class="span2 left-justify"
ng-repeat="choice in physicalmode_choices">
<input type="radio"
name="physical_layer"
value="{{ choice.private }}"
ng-click="alert('foo')"
required
ng-model="$parent.networkoptions.physicalmode" />
<span ng-bind="choice.public"></span>
</div>
Can I not do this with an ng-click? Or am I misunderstanding what an "expression" is?
Thanks,
Mike

To clarify DerekR's answer.
When angular sees
ng-click='alert("test")'
it looks for
$scope.alert
which is likely to be undefined.
You need to provide a proxy method on the scope, or possibly even rootscope.
For example:
$rootScope.log = function(variable) {
console.log(variable);
};
$rootScope.alert = function(text) {
alert(text);
};
See: http://deansofer.com/posts/view/14/AngularJs-Tips-and-Tricks-UPDATED#scopemethods

When you call something inside of an ng-click the parsing service evaluates expressions against the scope rather than the global window object.
If you wanted to do an alert inside of an ng-click then could write a method on the scope or parent scope that in turn calls the alert.

I created this jsFiddle to show how it works.
http://jsfiddle.net/tM56a/1/
<li ng-repeat="menu in menus" >
<a ng-click="test(menu)">click me</a>
</li>

Related

ng-if not working with simple javascript

ng-if is not working when I change the values through simple javascript function.My function is getting called but the changes in values cannot be seen in view. Please refer below code.
HTML
<div id="span" ng-app='MyModule' ng-cloak ng-controller="MyController">
<div ng-if="!bool">
This is for true
</div>
<div ng-if="bool">
This is False
</div>
{{bool}}
<br>
<input type="submit" ng-click = "myfunction('test')" value="ng-if button">
</div>
<input type="submit" onClick = "check1()" value="simple JS button">
JS
angular.module('MyModule', [])
.controller('MyController', function ($scope) {
$scope.bool = true;
$scope.myfunction = function (data) {
$scope.bool = !$scope.bool;
};
});
function check1() {
angular.element(document.getElementById('span')).scope().myfunction('test');
}
When I use ng-click button it changes value of bool changes, but same doesn't happens with simple JS button . Actually I am implementing Angular in a page that already uses jQuery, so I need to use simple JS button.
JS Fiddle : JS Fiddle
At first, ng-click is able to parse an angular expression.
Second, it handles the reference to the current scope and performs a call to $scope.$apply to notify any watchers to update. If you would add a call to angular.element(document.getElementById('span')).scope().$apply() in your function, it should work as expected.
Use $scope.apply . This is because angulars digest cycle will not know if your value changes outside of its scope like in a simple JS function.

How can I console.log expression in AngularJS?

As a new "Angularian", I have this:
<div data-ng-app="" data-ng-init="">
<input type="text" ng-model="hello">
<p>{{hello}}</p>
</div>
But I wonder, how can I console.log whatever I type in the expression (ng-model)?
(e.g. if I type "Soylent Green is people" in the text field I want to see it in Chrome's Inspector window)
You can use console.log($scope.hello); inside your controller.
I suggest you to take a look about Addons/Extensions like Batarang and
ng-inspector.
This is the newest one, and as the name suggests, it allows you to inspect your application's scopes.
Use ng-change directive with your input tag like
<input type="text" ng-model="hello" ng-change="textChange()" >
and in your controller
$scope.textChange = function () {
console.log($scope.hello);
}
https://jsfiddle.net/walioulislam/wpjwavrc/
You have a controller for this app, if you don't know about controllers you can read the documentation in w3schools
You can do console.log($scope.hello) inside your controller
By default each and every variable you define in HTML is inside $scope object

ng-click not working with ng-if

Why does the second button not work, when ng-if is used?
I want to realize a button that is present only when the model value is set / not ""/ not null.
Template:
<input type="text" ng-model="blub"/>
<br/>
<button ng-click="blub = 'xxxx'">X</button>
<br/>
<button ng-click="blub = 'yyyy'" ng-if="blub.length">Y</button>
Controller:
angular.module('test', [])
.controller('Main', function ($scope) {
// nothing to do here
});
To play around: JSFiddle
Use ng-show Instead of ng-if. That should work.
Fiddle
It doesn't work because ng-if is creating a new scope and interpreting your blub = 'yyyy' as defining a new local variable in the new scope.
You can test this by putting the second button to:
<button ng-click="$parent.blub = 'yyyy'" ng-if="blub.length">Y</button>
However $parent is an ugly feature.
The button doesn't work because of the nested scope created by ng-if. The blub bound to the second button is not the same blub that's bound to the first one.
You can use ng-show instead of ng-if, since it uses its parent's scope, but that's just avoiding the problem instead of solving it. Read about nested scopes so you can understand what actually happened.
Also, check this out: fiddle
Try putting a magic dot on the variable
<input type="text" ng-model="bl.ub"/>
<br/>
<button ng-click="bl.ub = 'xxxx'">X</button>
<br/>
<button ng-click="bl.ub = 'yyyy'" ng-if="bl.ub.length">Y</button>
jsfiddle
you can use : [hidden]="!expression"

how to get value ng-model in html to javascript

Probably silly question, but I have my html form with simple input and password:
<li>
<input type="text" placeholder="Username" ng-model="user.username" />
<a class="iconani usera"></a>
</li>
<li>
<input type="password" placeholder="Password" ng-model="user.password" />
<a class="iconani locka"></a>
</li>
and i want to get value from ng-model to java script
query.equalTo("user", document.getElementById('value from ng-model'));
I use this from parse.com
Can you help me?
In AngularJS, you don't need (and want) to touch your DOM at all to get the data. ng-model directive creates an automated two-way binding between your <input> and your $scope.user variable's properties.
login($scope.user.username, $scope.user.password, ...);
You don't need to touch the form itself at all.
hon2a's answer is the right one ;-) I can try to explain it a bit differently as I also just recently started using angular. A good and simple intro to angular concepts of ng-model and controllers is given at http://www.w3schools.com/angular/angular_intro.asp.
So, all your javascript should be executing in Angular Controllers. In the corresponding controller (i.e. javascript code) the data from HTML form is bound using that angular directive "ng-model" and nothing else. You have your HTML part just fine, assuming you have the angular stuff somewhere linked properly (I would strongly recommend using Yeoman Angular generator to handle that...). At least there should be something like this:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="yourApp" ng-controller="yourController">
<!-- your app part goes here -->
</div>
And then the in the angular controller you actually have that data at hand automatically without doing anything else than just having a constructor/initialiser for it:
angular.module('yourApp').controller('yourController', function ($scope) {
$scope.user = {'username': '', 'userpassword': ''};
// And rest of your stuff goes here...
// In your functions, just use $scope.user.username and $scope.user.userpassword.
}
Hope this helps...

How do you show/hide an element on a click event from js code?

I used to use Jquery extensively. Now that I stumbled upon Angularjs, I am trying understand how it works and I have been really excited about the AutoMagic way it works. For example, am able to do the below process of hiding and showing few blocks just by using ng-click, ng-hide & ng-show.
<form id="signup-form" ng-submit="processForm()" ng-hide="showConfirm" >
<input type="text" name="user" ng-model="name">
<button type="submit" id="submit" ng-click="showConfirm = ! showConfirm">Submit</button>
</form>
<div class="col-md-12 confirmation" ng-show="showConfirm">
<h2 >Thanks alot for your feedback.</h1>
</div>
But, I am still wondering how can I do the same from code, say from a controller. In Jquery one way to do would be like:
$( "#submit" ).click(function() {
$(".confirmation").show();
$("#signup-form").hide();
});
And maybe if I want to validate the form I can use .preventDefault(); in Jquery and do something. How does all this work in AngularJs?
Just change the model value in your controller: showConfirm = !showConfirm;
This will update your view automatically using the ng-hide and ng-show directives you already have in place.
Better yet, call a scoped function like:
$scope.toggleConfirm = function() { showConfirm = !showConfirm; }
...and call that in your view using ng-click="toggleConfirm()" to keep your code DRY.

Categories