Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Expression evaluated 2 times

Tags:

javascript

angularjs

In following example:

test.html

<!DOCTYPE html>
<html ng-app ng-controller="AppController">
    <head>
        <script type="text/javascript"  src="angular.js"></script>
        <script type="text/javascript"  src="script1.js"></script>
    </head>
    <body>
        <div ng-include="'test1.html'"></div>
        {{testFn()}}
    </body>
</html>

test1.html

<div>{{testFn()}}</div>

script1.js

function AppController($scope) {
    $scope.testFn = function() {
        console.log("TestFn");
        return "test";
    }
}

happen that fn testFn executes 4 times. I expected to see just 2 logs in console. Even, if I remove 

<div ng-include="'test1.html'"></div>

there are 2 logs, not just one. What did I wrong?

UPDATED:

angular.js

// added console.log to original code
var ngBindDirective = ngDirective(function(scope, element, attr) {
  console.log("ngDirective", attr.ngBind);
  element.addClass('ng-binding').data('$binding', attr.ngBind);
  scope.$watch(attr.ngBind, function ngBindWatchAction(value) {
    console.log("ngDirective - scope.$watch", value);
    element.text(value == undefined ? '' : value);
  });
});

test.html

<!DOCTYPE html>
<html ng-app ng-controller="AppController">
    <head>
        <script type="text/javascript"  src="angular.js"></script>
        <script type="text/javascript"  src="script1.js"></script>
    </head>
    <body>
        <div ng-bind="testFn()"></span>

    </body>
</html>

console

createInjector - modulesToLoad undefined angular.js:2666
loadModules undefined angular.js:2756
createInjector - modulesToLoad 
["ng", Array[2]]
 angular.js:2666
loadModules 
["ng", Array[2]]
 angular.js:2756
loadModules ["ngLocale"] angular.js:2756
loadModules [] angular.js:2756
supportObject - key $locale angular.js:2702
provider - name $locale angular.js:2712
supportObject - key $compile angular.js:2702
provider - name $compile angular.js:2712
supportObject - key aDirective angular.js:2702
factory - name aDirective angular.js:2723
provider - name aDirective angular.js:2712
supportObject - key inputDirective angular.js:2702
factory - name inputDirective angular.js:2723
provider - name inputDirective angular.js:2712
supportObject - key textareaDirective angular.js:2702
factory - name textareaDirective angular.js:2723
provider - name textareaDirective angular.js:2712
supportObject - key formDirective angular.js:2702
factory - name formDirective angular.js:2723
provider - name formDirective angular.js:2712
supportObject - key scriptDirective angular.js:2702
factory - name scriptDirective angular.js:2723
provider - name scriptDirective angular.js:2712
supportObject - key selectDirective angular.js:2702
factory - name selectDirective angular.js:2723
provider - name selectDirective angular.js:2712
supportObject - key styleDirective angular.js:2702
factory - name styleDirective angular.js:2723
provider - name styleDirective angular.js:2712
supportObject - key optionDirective angular.js:2702
factory - name optionDirective angular.js:2723
provider - name optionDirective angular.js:2712
supportObject - key ngBindDirective angular.js:2702
factory - name ngBindDirective angular.js:2723
provider - name ngBindDirective angular.js:2712
supportObject - key ngBindHtmlUnsafeDirective angular.js:2702
factory - name ngBindHtmlUnsafeDirective angular.js:2723
provider - name ngBindHtmlUnsafeDirective angular.js:2712
supportObject - key ngBindTemplateDirective angular.js:2702
factory - name ngBindTemplateDirective angular.js:2723
provider - name ngBindTemplateDirective angular.js:2712
supportObject - key ngClassDirective angular.js:2702
factory - name ngClassDirective angular.js:2723
provider - name ngClassDirective angular.js:2712
supportObject - key ngClassEvenDirective angular.js:2702
factory - name ngClassEvenDirective angular.js:2723
provider - name ngClassEvenDirective angular.js:2712
supportObject - key ngClassOddDirective angular.js:2702
factory - name ngClassOddDirective angular.js:2723
provider - name ngClassOddDirective angular.js:2712
supportObject - key ngCspDirective angular.js:2702
factory - name ngCspDirective angular.js:2723
provider - name ngCspDirective angular.js:2712
supportObject - key ngCloakDirective angular.js:2702
factory - name ngCloakDirective angular.js:2723
provider - name ngCloakDirective angular.js:2712
supportObject - key ngControllerDirective angular.js:2702
factory - name ngControllerDirective angular.js:2723
provider - name ngControllerDirective angular.js:2712
supportObject - key ngFormDirective angular.js:2702
factory - name ngFormDirective angular.js:2723
provider - name ngFormDirective angular.js:2712
supportObject - key ngHideDirective angular.js:2702
factory - name ngHideDirective angular.js:2723
provider - name ngHideDirective angular.js:2712
supportObject - key ngIncludeDirective angular.js:2702
factory - name ngIncludeDirective angular.js:2723
provider - name ngIncludeDirective angular.js:2712
supportObject - key ngInitDirective angular.js:2702
factory - name ngInitDirective angular.js:2723
provider - name ngInitDirective angular.js:2712
supportObject - key ngNonBindableDirective angular.js:2702
factory - name ngNonBindableDirective angular.js:2723
provider - name ngNonBindableDirective angular.js:2712
supportObject - key ngPluralizeDirective angular.js:2702
factory - name ngPluralizeDirective angular.js:2723
provider - name ngPluralizeDirective angular.js:2712
supportObject - key ngRepeatDirective angular.js:2702
factory - name ngRepeatDirective angular.js:2723
provider - name ngRepeatDirective angular.js:2712
supportObject - key ngShowDirective angular.js:2702
factory - name ngShowDirective angular.js:2723
provider - name ngShowDirective angular.js:2712
supportObject - key ngSubmitDirective angular.js:2702
factory - name ngSubmitDirective angular.js:2723
provider - name ngSubmitDirective angular.js:2712
supportObject - key ngStyleDirective angular.js:2702
factory - name ngStyleDirective angular.js:2723
provider - name ngStyleDirective angular.js:2712
supportObject - key ngSwitchDirective angular.js:2702
factory - name ngSwitchDirective angular.js:2723
provider - name ngSwitchDirective angular.js:2712
supportObject - key ngSwitchWhenDirective angular.js:2702
factory - name ngSwitchWhenDirective angular.js:2723
provider - name ngSwitchWhenDirective angular.js:2712
supportObject - key ngSwitchDefaultDirective angular.js:2702
factory - name ngSwitchDefaultDirective angular.js:2723
provider - name ngSwitchDefaultDirective angular.js:2712
supportObject - key ngOptionsDirective angular.js:2702
factory - name ngOptionsDirective angular.js:2723
provider - name ngOptionsDirective angular.js:2712
supportObject - key ngViewDirective angular.js:2702
factory - name ngViewDirective angular.js:2723
provider - name ngViewDirective angular.js:2712
supportObject - key ngTranscludeDirective angular.js:2702
factory - name ngTranscludeDirective angular.js:2723
provider - name ngTranscludeDirective angular.js:2712
supportObject - key ngModelDirective angular.js:2702
factory - name ngModelDirective angular.js:2723
provider - name ngModelDirective angular.js:2712
supportObject - key ngListDirective angular.js:2702
factory - name ngListDirective angular.js:2723
provider - name ngListDirective angular.js:2712
supportObject - key ngChangeDirective angular.js:2702
factory - name ngChangeDirective angular.js:2723
provider - name ngChangeDirective angular.js:2712
supportObject - key requiredDirective angular.js:2702
factory - name requiredDirective angular.js:2723
provider - name requiredDirective angular.js:2712
supportObject - key ngRequiredDirective angular.js:2702
factory - name ngRequiredDirective angular.js:2723
provider - name ngRequiredDirective angular.js:2712
supportObject - key ngValueDirective angular.js:2702
factory - name ngValueDirective angular.js:2723
provider - name ngValueDirective angular.js:2712
supportObject - key ngMultipleDirective angular.js:2702
factory - name ngMultipleDirective angular.js:2723
provider - name ngMultipleDirective angular.js:2712
supportObject - key ngSelectedDirective angular.js:2702
factory - name ngSelectedDirective angular.js:2723
provider - name ngSelectedDirective angular.js:2712
supportObject - key ngCheckedDirective angular.js:2702
factory - name ngCheckedDirective angular.js:2723
provider - name ngCheckedDirective angular.js:2712
supportObject - key ngDisabledDirective angular.js:2702
factory - name ngDisabledDirective angular.js:2723
provider - name ngDisabledDirective angular.js:2712
supportObject - key ngReadonlyDirective angular.js:2702
factory - name ngReadonlyDirective angular.js:2723
provider - name ngReadonlyDirective angular.js:2712
supportObject - key ngSrcDirective angular.js:2702
factory - name ngSrcDirective angular.js:2723
provider - name ngSrcDirective angular.js:2712
supportObject - key ngHrefDirective angular.js:2702
factory - name ngHrefDirective angular.js:2723
provider - name ngHrefDirective angular.js:2712
supportObject - key ngClickDirective angular.js:2702
factory - name ngClickDirective angular.js:2723
provider - name ngClickDirective angular.js:2712
supportObject - key ngDblclickDirective angular.js:2702
factory - name ngDblclickDirective angular.js:2723
provider - name ngDblclickDirective angular.js:2712
supportObject - key ngMousedownDirective angular.js:2702
factory - name ngMousedownDirective angular.js:2723
provider - name ngMousedownDirective angular.js:2712
supportObject - key ngMouseupDirective angular.js:2702
factory - name ngMouseupDirective angular.js:2723
provider - name ngMouseupDirective angular.js:2712
supportObject - key ngMouseoverDirective angular.js:2702
factory - name ngMouseoverDirective angular.js:2723
provider - name ngMouseoverDirective angular.js:2712
supportObject - key ngMouseoutDirective angular.js:2702
factory - name ngMouseoutDirective angular.js:2723
provider - name ngMouseoutDirective angular.js:2712
supportObject - key ngMousemoveDirective angular.js:2702
factory - name ngMousemoveDirective angular.js:2723
provider - name ngMousemoveDirective angular.js:2712
supportObject - key ngMouseenterDirective angular.js:2702
factory - name ngMouseenterDirective angular.js:2723
provider - name ngMouseenterDirective angular.js:2712
supportObject - key ngMouseleaveDirective angular.js:2702
factory - name ngMouseleaveDirective angular.js:2723
provider - name ngMouseleaveDirective angular.js:2712
supportObject - key 
Object {$anchorScroll: function, $browser: function, $cacheFactory: function, $controller: function, $document: function…}
 angular.js:2702
provider - name $anchorScroll angular.js:2712
provider - name $browser angular.js:2712
provider - name $cacheFactory angular.js:2712
provider - name $controller angular.js:2712
provider - name $document angular.js:2712
provider - name $exceptionHandler angular.js:2712
provider - name $filter angular.js:2712
supportObject - key currencyFilter angular.js:2702
factory - name currencyFilter angular.js:2723
provider - name currencyFilter angular.js:2712
supportObject - key dateFilter angular.js:2702
factory - name dateFilter angular.js:2723
provider - name dateFilter angular.js:2712
supportObject - key filterFilter angular.js:2702
factory - name filterFilter angular.js:2723
provider - name filterFilter angular.js:2712
supportObject - key jsonFilter angular.js:2702
factory - name jsonFilter angular.js:2723
provider - name jsonFilter angular.js:2712
supportObject - key limitToFilter angular.js:2702
factory - name limitToFilter angular.js:2723
provider - name limitToFilter angular.js:2712
supportObject - key lowercaseFilter angular.js:2702
factory - name lowercaseFilter angular.js:2723
provider - name lowercaseFilter angular.js:2712
supportObject - key numberFilter angular.js:2702
factory - name numberFilter angular.js:2723
provider - name numberFilter angular.js:2712
supportObject - key orderByFilter angular.js:2702
factory - name orderByFilter angular.js:2723
provider - name orderByFilter angular.js:2712
supportObject - key uppercaseFilter angular.js:2702
factory - name uppercaseFilter angular.js:2723
provider - name uppercaseFilter angular.js:2712
provider - name $interpolate angular.js:2712
provider - name $http angular.js:2712
provider - name $httpBackend angular.js:2712
provider - name $location angular.js:2712
provider - name $log angular.js:2712
provider - name $parse angular.js:2712
provider - name $route angular.js:2712
provider - name $routeParams angular.js:2712
provider - name $rootScope angular.js:2712
provider - name $q angular.js:2712
provider - name $sniffer angular.js:2712
provider - name $templateCache angular.js:2712
provider - name $timeout angular.js:2712
provider - name $window angular.js:2712
decorator - serviceName $rootScope angular.js:2742
supportObject - key $rootElement angular.js:2702
factory - name $rootElement angular.js:2723
provider - name $rootElement angular.js:2712
---------------------------------------------
ngDirective testFn() angular.js:12363
TestFn script1.js:3
ngDirective - scope.$watch test angular.js:12366
TestFn script1.js:3
like image 544
DraganS Avatar asked Feb 25 '13 23:02

DraganS

People also ask

How do you evaluate two expressions?

To evaluate an algebraic expression, you have to substitute a number for each variable and perform the arithmetic operations. In the example above, the variable x is equal to 6 since 6 + 6 = 12. If we know the value of our variables, we can replace the variables with their values and then evaluate the expression.

What is 2x expression?

The verbal expression for 2x is: "Two times some value." or "The product of two and some value."

How do you evaluate two variables?

A mathematical expression can have variables as part of the expression. If x=3, and y=5, the expression 7x + y - 4 becomes 7 * 3 +5 - 4 which is equal to 21 + 5 - 4 or 22. To evaluate an expression with two or more variables, substitute the value of the variables into the expression and simplify.

1 Answers

UPDATE:

When interpolating the view expressions and running the digest cycle Angular will re-run/interpolate each expression at least twice, in order to 'normalize it' before rendering (See this github issue and this SO post).

Thus, this is expected behavior.

For that matter, if you're using scope methods in view expressions, these methods should be idempotent (they should provide the same output given the same input).

like image 99
Stewie Avatar answered Sep 19 '22 13:09

Stewie
Sign in to Comment

Related questions

Programmatically reading a Microsoft Word document
Easy way to handle post data in meteor.js?
Kendo UI Stock Chart Navigator Broken
window.onbeforeunload fires in IE for partial postback events
Submitting form after using e.preventDefault();
How can i get data from FormData in javascript?
Why setting a client-side timeout when using long polling?
Javascript location.href to mailto triggers a GET HTTP that gets canceled in Chrome
Using Logical AND in Javascript Variable Declarations
Getting Specific Google Analytics Goal Funnel Stage
Axis tick labelling
Executing scraped JavaScript with cheerio
jQuery scripts: function(window, document, undefined) vs ;(function($, window, document, undefined) [duplicate]
d3 map with checkbox filtering
Refactoring a userscript to use javascript modules
Develop Chrome extension without redirect URI
jQuery - checkboxes like radiobuttons
Angular ng-repeat causes flickering
Remove classname from element with javascript
How to convert binary fraction to decimal

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!