Why printing multiple times on calling a function - AngularJS - javascript

I am calling a function from the controller scope, but in the console the values are printed three times. Why is this happening?
SOURCE
<!DOCTYPE html>
<html ng-app="myModule" >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-init="priceList='promo03,promo04'">
<div ng-controller="PricingController" >
{{splitArray()}}
</div>
<script>
var myModule = angular.module('myModule',[]);
myModule.controller('PricingController',['$scope', function($scope){
$scope.priceString = $scope.priceList;
$scope.array = [];
$scope.splitArray= function(){
console.log($scope.priceString);
$scope.array = $scope.priceString.split(",");
console.log($scope.array[0]);
console.log($scope.array[1]);
};
}]);
</script>
</body>
</html>
CONSOLE OUTPUT
promo03,promo04
promo03
promo04
promo03,promo04
promo03
promo04
promo03,promo04
promo03
promo04
Expected Output
promo03,promo04
promo03
promo04

This is called for every digest loop of Angular.
If you keep your program running, you'll have even more logs.
To prevent it, call your function INTO your controller, not into a binded value into your html.
For instance :
$scope.splitArray= function(){
console.log($scope.priceString);
$scope.array = $scope.priceString.split(",");
console.log($scope.array[0]);
console.log($scope.array[1]);
};
$scope.splitArray();

Related

Why wont my jsp page recognize my angular controller?

jsp page
<!DOCTYPE html>
<html data-ng-app="myApp">
<head><title>Sample JSP Page</title></head>
<body>
<div data-ng-contoler="mainController" >
<input type="text" data-ng-model="greeting">
This is from angular {{greeting}}
</div>
<button data-ng-click="test()">doSomething</button>
</body>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/toast.js"></script>
<script src="app/app.js"></script>
<script src="app/mainController.js"></script>
<script src="app/services.js"></script>
</html>
My module myApp
var myApp = angular.module('myApp',['ngRoute']);
myApp.config(function($logProvider){
$logProvider.debugEnabled(true);
});
My mainController.js
myApp.controller('mainController',function($scope, $http, myAppFactory) {
$scope.greeting = null;
$scope.greeting = "Jo jo jo it worked!!!!";
$scope.test = function test(){
var v= "asddas";
myAppFactory.test().success(function(date){
var a = data;
})
}
});
My service.js myAppFactory
myApp.factory('myAppFactory', function($http) {
var factory = {};
factory.test = function(){
return "test";
}
return factory;
});
When i press the doSomething button it should go to scope.test
The problem is that the controller is not available.
When i start eclipse, and go to the page on chrome, press f12
i can find the contoller with my code in it, but it never runs.
On start the "greeting" is set to be:
$scope.greeting = null;
$scope.greeting = "Jo jo jo it worked!!!!";
But on the page it is blank, on f12 i see with breakpoints that the code
never worked.
The input field with the data-ng-model="greeting"
is working fine. When i go to the page and write something in it
it is instantly displayed on change.
All files are loaded on the debug window. app, mainController and service.
On load the pages gets all files with status 200 OK
But i cant enter with breakpoints in the mainController.
change typing mistake
<div data-ng-contoler="mainController" >
to
<div data-ng-controller="mainController" >
Hope it will work.

Scope function calling on DOM change(two-way data binding) angularjs

<!DOCTYPE html>
<html data-ng-app="app">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body data-ng-controller="SimpleController">
<script>
var app = angular.module('app', []);
app.controller('SimpleController', SimpleController);
function SimpleController($scope) {
$scope.isNumberA = function(val) {
console.log('called');
if (val == 2) return true;
}
}
</script>
<input type="checkbox" ng-model="switcher" />
<h1 ng-if="isNumberA(10)">isNumber</h1>
</body>
</html>
In the above code first time, isNumberA calling because of ng-if="isNumberA(10)" but I don't know why it is calling another time. Check console, it prints two times on DOM render in brower. After that when I click on check box again it calling the function. Why this method calling on check box click? I didn't called it. Is this the two-way binding? And also if I remove the <h1 ng-if="isNumberA(10)"></h1>, it is not calling. What is happening here?
You have used a function call rather then a variable for condition (ng-if).
Angular watch every scope variable used in view, but when you use a function call, it can't decided which variable or event will effect this function return value, so Angular run such function on every digest cycle.
You should call this function in ng-init and store the return value of this function in a variable, and use that variable in ng-if.
$scope.isNumberA = function(val) {
console.log('called');
if (val == 2){
$scope.showIfBlock = true;
} else {
$scope.showIfBlock = false;
}
}
<span ng-init="isNumberA(10)"></sapn>
<h1 ng-if="showIfBlock">isNumber</h1>
ng-if will evaluate its expression when digest cycle runs, basically you shouldn't make an function call from ng-if expression.
DEMO
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body data-ng-controller="SimpleController">
<script>
var app = angular.module('app', []);
app.controller('SimpleController', SimpleController);
function SimpleController($scope) {
$scope.isNumberA = function(val) {
console.log('called');
if (val == 2) $scope.block = true;
$scope.block = false;
}
}
</script>
<input type="checkbox" ng-model="switcher" />
<span ng-init="isNumberA(10)"></sapn>
<h1 ng-if="block">isNumber</h1>
</body>
</html>
Read More here
ng-if being called more times than it should

Angularjs: why there are 3 watchers for 1 binding?

Please take a look at the screenshot given below
As you can see in the screenshot above there are #3 watchers for a single binding.
Can anyone please elaborate why is it so?
P.S: I am using AngularJS Batarang for checking the performance.
var app = angular.module('app', []);
app.controller('appCtrl', function ($scope, $timeout) {
$scope.name = 'vikas bansal';
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="appCtrl">
{{name}}
</div>
</body>
</html>
I think Angular Batarang has a wrong counter of watchers. I checked with few different sources, and all except AngularJS Batarang show me single watcher on your code. Check out this question with function:
(function () {
var root = angular.element(document.getElementsByTagName('body'));
var watchers = [];
var f = function (element) {
angular.forEach(['$scope', '$isolateScope'], function (scopeProperty) {
if (element.data() && element.data().hasOwnProperty(scopeProperty)) {
angular.forEach(element.data()[scopeProperty].$$watchers, function (watcher) {
watchers.push(watcher);
});
}
});
angular.forEach(element.children(), function (childElement) {
f(angular.element(childElement));
});
};
f(root);
// Remove duplicate watchers
var watchersWithoutDuplicates = [];
angular.forEach(watchers, function(item) {
if(watchersWithoutDuplicates.indexOf(item) < 0) {
watchersWithoutDuplicates.push(item);
}
});
console.log(watchersWithoutDuplicates.length);
})();
And you can check Watchers extension for chrome. Both show 1 watcher.

AngularJS insert alert box

I am completely new to AngularJS and have been stuck with this. I want to be able to conditionally display a Javascript alertbox on the page.
Suppose I want to do something like this:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<script>{{warning}}</script>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.warning = "alert('This is a warning');";
});
</script>
</body>
</html>
So I assumed this has to do with AngularJS sanitizing the string and taking out the javascript. After some googling I tried the following:
$scope.warning = $sce.trustAsJS("alert('This is a warning');");
I also tried trustAsHtml and added the script tags in the string, but neither displayed the alertbox. Could someone tell me and tell me what is going wrong?
it should actually be like this:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.name = 'Superhero';
if ($scope.name==='Superhero') {
alert("hello");
}
}
if you want the alert to be shown conditionally by a changing model on view try something like this:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.name = 'Superhero';
$scope.$watch('name', function(newVal, oldVal) {
alert("hello");
})
}
now every time you will change the 'name' model in your view, the alert will pop-up
refer to the doc for more information about watches
You want $scope.warning to be a function, not the result of the execution of one nor a string.
$scope.warning = function () { alert('This is a warning'); };
That way it can be called later in your view : warning() should display the alert.
Alternatively, since alert is a function, you may just want to use it as $scope.warning :
$scope.warning = alert;
+
warning('this is a warning')
will produce the same result.

infdig Infinite $digest Loop

I'm learning AngularJs but I cant make it works.
I read about the digest cycle but it is not clear for me.
It's obvious that this code fails because enter in a infinite loop, but I dont know how to fix it.
Could someone help me?
<!DOCTYPE html>
<html lang="eng" ng-app="test">
<head>
<title>Learning Angular</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-route.js"></script>
<script type="text/javascript">
var app = angular.module('test', ['ngRoute']);
app.factory('visitCounterService', function () {
var counterService = function() {
var _count = 1;
var counter = function() { return _count++; };
return { counter: counter }
}();
return counterService;
});
app.service('homeModel', ['visitCounterService', function(visitCounterService){
this.getTitle = function() {
var n = visitCounterService.counter();
return "Welcome to this awesome demo. You are the visitor n° " + n;
};
}]);
app.controller('homeController', ['$scope', 'homeModel', function($scope, homeModel) {
$scope.home = homeModel;
}]);
</script>
</head>
<body ng-controller="homeController">
<h3>{{home.getTitle()}}</h3>
</body>
</html>
Thanks in advice!!!
Angular registers an implicit $watch on the home.getTitle() expression. This expression will get called at least twice because angular wants to check if the model has stabilized.
Your code returns a different string everytime home.getTitle() is called so angular continues digesting until it reaches the max digest cycles limit.
Try:
$scope.homeTitle = homeModel.getTitle();
and
<h3>{{homeTitle}}</h3>

Categories