Why is this javascript defined @ AngularJS 1.2.26 Controller being called for every single click on the page? Strange behavior -

Why is this javascript defined @ AngularJS 1.2.26 Controller being called for every single click on the page? Strange behavior -

hi i've been developing first angularjs application , studying angular 4 months using free time, far beingness expert.

i notice in 1 of controllers there's function defined calculate effort between 2 dates that's beingness called every single click happens in page. mean if have simple button shows or hides parts of view or using angular-ui calendar component button show calendar triggers function. have no clue why happening. here's fragment of code:

my controller definition:

'use strict'; (function () { var byallapp = angular.module('byallapp'); byallapp.controller('activitiecontroller', ['$scope', '$log', 'httpgetservice', '$rootscope', 'httppostservice', '$moment', function ($scope, $log, httpgetservice, $rootscope, httppostservice, $moment) { $scope.activities = [];//array holds objects displayed in table. ....//a lot of normal code here. no code @ updates $scope.activities array ever called outside other function. //function calculates effort, uses momentjs this.calculateeffortfromvalues = function (finaldate, initialdate) { $log.info('executing calculateeffortfromvalues'); var initial = $moment(new date(initialdate)); var final = $moment(new date(finaldate)); var duration = $moment.utc(final.diff(initial)).format("hh:mm"); $log.info('duration: ' + duration); homecoming (duration); } }]); })();

than in view utilize controller , angular directives render table using $scope.activities array:

<div ng-controller="activitiescontroller activitiesctrl"> .... <tbody> <tr ng-repeat="activitylist in activities"> <td>{{activitylist.initialdate | date : 'dd/mm/yyyy'}}</td> <td>{{activitylist.initialdate| date : 'hh:mm a'}}</td> <td>{{activitylist.enddate | date : 'hh:mm a'}}</td> **<td>{{activitiesctrl.calculateeffortfromvalues(activitylist.enddate, activitylist.initialdate)}}</td>** <td>{{activitylist.codcontract}}</td> <td>{{activitylist.description}}</td> <td> <button class="btn btn-danger btn-mini" ng-click="deleterow(row)" ng-hide="istemp($index)"><img width="25px" height="25px" title="delete activity!" src="img/trash.ico"/></button> </td> </tr> </tbody>

i phone call function while building table calculate effort based on 2 other fields of table showed above.

all works perfeclty expected. reviewing code , open debugger console in chrome noticed every single click have no page, function called again. start thinking somehow $scope.activities array beingness updated double checked , doesn's seem case it's updated within functions log console , functions never called.

any clues causing unusual behavior?

when bind values in html code, {{ }}, inquire angular maintain html snippet date info bound to. in order accomplish that, angular has check at points in time if info has changed. if bind html result of function call, angular has execute function sure html date.

now, these certain points in time when angular finishes $applying code (the end of $digest cycle).

framework events, such ng-click, causes angular $apply code.

if concerned non-relevant re-evaluation of effort, should bound $scope variable $scope.effort.

edit:

you mentionned not using events, assuming initialdate , enddate won't updated, resulting effort won't need recomputed. should compute once.

//activitiecontroller //code phone call after $scope.activities gets filled (not quoted in question) $scope.activities.map(function(a){ a.effort = calculateeffortfromvalues(a.initialdate,a.initialdate); }); //html <td>{{activitylist.effort}}</td>

i don't why using angular or client framework/library html page doesn't require interactivity (== events).

angularjs