Difference between ng-init and onload for function invoke [Angular JS] - javascript

I am working on a angular application and have a scenario where i want to focus on a text field on page load. i have tried HTML5 autofocus but have to find an alternative solution for this since there is a browser compatibility issue for the same.
I am planning to invoke a function on page load which will focus on the input field i wanted. I have the following functions with Angular ng-init and onload to load the function.
I am not sure which method should i follow in the angular context as i am little confused between their difference.
onload
<body onload="focusOnInput()">
<form name="resetPasswordForm">
<input name="NewPassword" type="password"/>
</form>
</body>
<script>
function focusOnInput() {
document.forms["resetPasswordForm"]["NewPassword"].focus();
}
</script>
Angular ng-init
<body in-init="focusOnInput()">
<form name="resetPasswordForm">
<input name="NewPassword" type="password"/>
</form>
<script>
function focusOnInput() {
document.forms["resetPasswordForm"]["NewPassword"].focus();
}
</script>
</body>

onload is not in your angular context. onload function is a callback function on LOAD event of DOM.
your ng-init is in angular context. You need to use angular ng-init.
The ng-init function as shown in your code wont work as is. The function defined in ng-int should be in the angular context. your focusOnInput() isn't in the angular context . It's in javascript context.
if you like to use ng-init you'll need to inject $window into your controller and then use assign focusOnInput to your $scope and use that method in ng-init
something like this
angular.module().controller('TestController',['$scope','$window',function($scope,$window){
......
$scope.myNewFunction = $window.focusOnInput;
......
}])
and then use this myNewFunction in your ng-init.

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

Angular js in Dynamically create controls

In my application one block is loaded with the controls dynamically. After loading the dynamic controls the data is update by using the angular js. But the angular js is working with static placed controls. But not with dynamic controls.
Here I placing the dynamic code What I tried to get.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#ren").html('<p>Name: <input type="text" ng-model="name"></p>');
});
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Input something in the input box:</p>
<div id="ren"></div>
<p ng-bind="name"></p>
</div>
<button>click</button>
</body>
</html>
Here the input control dynamically added to the div. The text I enter in control does not appering on paragraph. But this work fine if the input control place in div static.
Am I doing any wrongly. please solve my problem.
Probably your html attached via jquery function, is not registered to angular's watch tree. as a result, it doesn't trigger a digest cycle when you type to input with ng-model. Also this kind of usages angular with jquery in the dom edition level is not recommended. In my opinion, you should use directive instead of that jquery-dom operation
I'd prefer to do it in angular way, rather than mixing jQuery with angular. Because directly adding DOM to angular context will not worked as angular compiled DOM(means angular binding will not work on newly injected DOM). You need to compile that DOM with $compile service with specific scope before injecting it into DOM to enable binding on it.
Lets follow this way, which is fully angular way of doing it. There would be ng-click directive on the button, and will toggle a flag to show and hide element & we will render that array using ng-if
HTML
<p>Input something in the input box:</p>
<div id="ren">
<p ng-if="showName">Name: <input type="text" ng-model="name"></p>
</div>
<p ng-bind="name"></p>
</div>
<button type="button" ng-click="showName!=showName">click</button>

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

In AngularJS, any inline javascript code that included in HTML templates doesn't work

In AngularJS, any inline javascript code that included in HTML templates doesn't work.
For Example:
main.html file:
<div ng-include="'/templates/script.html'"></div>
And script.html file:
<script type="text/javascript">
alert('yes');
</script>
When I open main page, I expect an alert message that say 'yes' but nothing happens. I think some security restrictions in the AngularJS is preventing inline scripts, but I couldn't find any workaround about that.
Note: I don't use jQuery or any other framework, only AngularJS 1.2.7.
jQlite does not support script tags. jQuery does, so the recommendation is to include jQuery if you need this functionality.
From Angular's Igor Minar in this discussion:
we looked into supporting script tags in jqlite, but what needs to be
done to get a cross-browser support involves a lot of black magic. For
this reason we decided that for now we are just going to recommend
that users use jquery along with angular in this particular case. It
doesn't make sense for us to rewrite one third of jquery to get this
working in jqlite.
Here's the related github issue jqLite should create elements in same way as jQuery where Igor sums up, before closing the issue, with this:
This is too much craziness for jqlite, so we are not going to do it.
Instead we are going to document that if you want have script elements
in ng:include or ng:view templates, you should use jquery.
demo plunker with jquery
Angular uses the $sanitize on ng-include directives which strips out scripts. A better approach for templates is to create a controller for that template.
It is better to use an individual controller for templates.
In template.html
<form role="form" ng-controller="LoginController">
<input type="text" placeholder="Email" ng-model="email">
<input type="password" placeholder="Password" ng-model="password">
<button class="btn btn-success" ng-click="login()">Sign in</button>
</form>
In the LoginController you can use whatever code you want
angular.module('myApp.controllers', []).
controller('LoginController', [function() {
alert('controller initialized');
}])
The event triggered when ng-include adds content is $includeContentLoaded. Your scripts should be included in this event:
For example (Plucker Demo):
function SettingsController($scope, $window) {
$scope.template={};
$scope.template.url = "demo.html";
$scope.$on('$includeContentLoaded', function(event){
$window.alert('content load');
});
}
Additionally you can set an init function using the onload attribute:
html
<div ng-include="template.url" onload="alertMe()" > </div>
</div>
Controller
$scope.alertMe=function(){
$window.alert('sending alert on load');
}
Include jQuery and change order of the angular.js and jquery.js. jQuery must be first, otherwise it does not work

Categories