1. घर
  2. सवाल और जवाब
  3. अभिव्यक्ति का मूल्यांकन 2 बार

अभिव्यक्ति का मूल्यांकन 2 बार

2013-02-25 38 views
5

निम्न उदाहरण में:अभिव्यक्ति का मूल्यांकन 2 बार

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"; 
    } 
}

होती हैं fn testFn कार्यान्वित 4 बार। मुझे कंसोल में केवल 2 लॉग देखने की उम्मीद है। यहां तक ​​कि, अगर मैं

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

2 लॉग हैं, केवल एक ही नहीं। मैंने क्या गलत किया?

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>

सांत्वना

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

स्रोत

2013-02-25 DraganS

+0

मैं केवल एक http://jsfiddle.net/grendian/CLkAV/ – grendian

+0

देख रहा हूं मेरे कंसोल में मैं देखता हूं (2) TestFn fiddle.jshell.net:23 (दो बार) - क्रोम। एफएफ एलोस टेस्टएफएन/ग्रेंड...वी/शो// लाइन 23) दो बार दिखाता है। मैंने आईई आइकन – DraganS

उत्तर

5

अद्यतन:

दृश्य अभिव्यक्तियों को पार करने और पाचन चक्र चलाने पर कोणीय प्रतिपादन से पहले 'सामान्यीकृत' करने के लिए प्रत्येक अभिव्यक्ति को कम से कम दो बार विभाजित/इंटरपोलेट करेगा (यह github issue और यह SO post देखें)।

इस प्रकार, यह व्यवहार की उम्मीद है।

उस मामले के लिए, यदि आप अभिव्यक्तियों में स्कोप विधियों का उपयोग कर रहे हैं, तो ये विधियां बेवकूफ होनी चाहिए (उन्हें एक ही इनपुट को एक ही इनपुट दिया जाना चाहिए)।

स्रोत

2013-02-25 23:30:03 Stewie

+0

खो दिया इस उदाहरण में मैंने रूटप्रोवाइडर का उपयोग नहीं किया। नमूना jsfiddle.net/grendian/CLkAV पर पाया जा सकता है। AngularJS सीखने के लिए प्रयुक्त टेस्ट ऐप मार्गप्रोवाइडर का उपयोग करता है, लेकिन वही व्यवहार होता है - अभिव्यक्तियों का मूल्यांकन 2 बार किया जाता है। असल में, ऐसा होता है क्योंकि मैं पृष्ठ बदल रहा हूं (AJAX द्वारा), इसलिए कोणीय पहले से ही प्रारंभ किया गया था। मैंने लाइन $ http.get (src, {cache: $ templateCache}) के बाद ब्रेक पॉइंट डाला है। सफलता (फ़ंक्शन (प्रतिक्रिया) (angular.js) ताकि AJAX पृष्ठ को एक बार लोड कर रहा हो। – DraganS

+0

अब मुझे एहसास हुआ कि मेरा 'उत्तर 'के बराबर मात्रा और प्रश्न हैं। यह एक टिप्पणी होनी चाहिए। अद्यतन ... – Stewie

+0

आपकी मदद के लिए धन्यवाद। – DraganS

संबंधित मुद्दे

 संबंधित मुद्दे