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>
Related
<!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
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.
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.
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();
I have written the code for it in which i try to convert the time into hex value and then pass that hex value to background-color.
This is the code for the controller and below is the code for view. Any help is appreciated.I think i am missing something very small here but am not able to figure it out.
var app = angular.module('myApp', []);
app.controller('TimeCtrl', function($scope,$timeout, $filter) {
$scope.clock = "loading clock"; // initialise the time variable
$scope.tickInterval = 1000 //ms
var tick = function () {
$scope.clock = Date.now() // get the current time
$scope.a = $filter('date')($scope.clock,'HHmmss');
$timeout(tick, $scope.tickInterval); // reset the timer
}
// Start the timer
$timeout(tick, $scope.tickInterval);
})
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller='TimeCtrl'>
<p ng-style="{'background-color': '#{{a}}'}">{{clock |date : 'HH:mm:ss'}}</p>
{{a}}
</div>
</body>
</html>
First off, you don't want to use $timeout in this case, you want to use $interval
Second, ng-style already expects an angular expression, so there is no need for the {{}}. All I did was change the expression to be syntactically correct.
var app = angular.module('myApp', []);
app.controller('TimeCtrl', function($scope,$interval, $filter) {
$scope.clock = "loading clock"; // initialise the time variable
$scope.tickInterval = 1000 //ms
var tick = function () {
$scope.clock = Date.now() // get the current time
$scope.a = $filter('date')($scope.clock,'HHmmss');
}
// Start the timer
$interval(tick, $scope.tickInterval);
})
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller='TimeCtrl'>
<p ng-style="{'background-color': '#' + a }">{{clock |date : 'HH:mm:ss'}}</p>
{{a}}
</div>
</body>
</html>