Function inside AngularJS controller is called twice

Question

I have an anonymous function tied to the $scope in AngularJS. Problem is that the function is invoked 2 times and hence the "Hello!" is alerted twice.

I have no explicit watch defined on the function.

I know that this is somehow related to Angular digest cycle, but I am not able to understand how.

angular.module("root", [])
  .controller("index", function($scope) {
    $scope.myObj = {};
    $scope.myObj.text = function() {
      alert("Hello!");
      return "<b>Hello!</b>";
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.min.js"></script>
<html>

  <body ng-app="root">
    <p ng-controller="index">
      <span ng-bind-html-unsafe="myObj.text()"></span>
    </p>
  </body>

</html>

See: stackoverflow.com/questions/19993294/…. Angular has to watch ng-bind-html-unsafe to update the DOM, and watched expressions are evaluated at least twice: the first time to update the value, the second time to ensure the value stays the same (checks possible side effects of the first first call) . — Yann
– Yann, Commented May 9, 2019 at 11:15

youarenotalone0209 · Accepted Answer · 2019-05-15 13:39:21Z

0

One quick and maybe (dirty) way to fix this is:

angular.module("root", [])
  .controller("index", function($scope) {
    var initializeController = false;
    $scope.myObj = {};
    $scope.myObj.text = function() {
      if (!initializeController) {
        initializeController = true;
        alert("Hello!");
        return "<b>Hello!</b>";
      }
    }
  });

edited May 15, 2019 at 13:39

answered May 15, 2019 at 0:20

youarenotalone0209

12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Function inside AngularJS controller is called twice

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related