Функция контроллера вызывается дважды при использовании в качестве интерполяции

У меня есть очень простое приложение, где я пытаюсь вызвать функцию моего контроллера, как показано ниже

 var app=angular.module('test',[])
 app.controller('ctrl',function($scope){
 $scope.func=function(){
    alert('hi')
  }
})

Вот как я это называю

  <body ng-app='test' >
    <h1 ng-controller='ctrl'>{{func()}}</h1>

  </body>

Проблема, с которой я сталкиваюсь, заключается в том, что моя функция вызывается дважды.

Прочтите много публикаций на SO, где причина этой проблемы в основном связана с конфигурацией вашего приложения или конфигурацией маршрута, где по ошибке, если вы настроили один и тот же контроллер для другого представления или если ваше приложение инициализируется дважды, вы столкнетесь с этой проблемой.

Но в моем случае у меня нет таких случаев, но я все еще сталкиваюсь с этой проблемой.

2 ответа

С помощью {{func()}}Вы создаете часы на функцию func, каждый раз, когда выполняется цикл дайджеста,funcбудет вызван.

Демо для демонстрации:

var app = angular.module('test', [])
app.controller('ctrl', function($scope) {
  $scope.val = 100;
  $scope.func = function() {
    alert($scope.val)
  };
  $scope.add = function(a) {
    return ++$scope.val;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>

<body ng-app='test'>
  <h1 ng-controller='ctrl'>
    {{func()}}
    {{add()}}
  </h1> 
</body>

Демо Fiddle для игры

Какова цель функции func()?

Можно ли связать переменную вместо непосредственного вызова функции?

var app=angular.module('test',[])
 app.controller('ctrl',function($scope) {
   function func() { // called in the future
     $scope.funcValue = 'My Title';
   }
})

HTML:

<body ng-app='test' >
    <h1 ng-controller='ctrl'>{{ funcValue }}</h1>
</body>
Другие вопросы по тегам