Angularjs 在angular中的函数不断得到执行

我的项目中有此模板：

<script type="text/ng-template" id="/challenges.html" ng-controller="ChallengeCtrl">

    <main>
    <h3 class="headingregister">Start challenge reeks</h3>

    {{getUser()}}

        <form name="startChallengesForm" ng-submit="getChallenges()">
            <button type="submit" class="btn btn-primary">Doe de challenges!</button>
        </form>
    </main>

</script>

这是auth.getUser：

auth.getUser = function(usr){
            return{
                getValue: function(callback){
                    $http({
                        method: 'POST',
                        url:'http://groep6api.herokuapp.com/user',
                        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                        transformRequest: function(obj) {
                            var str = [];
                            for(var p in obj)
                                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                            return str.join("&");
                        },
                        data : {username: usr}
                    }).then(function (result) {
                        //return result.data;
                        callback(result.data);

                    });
                }
            }
        }

问题是当我运行页面时，我在开发人员工具中看到函数被反复调用，它应该只显示用户信息

---

如何实现这一点？

模板中的函数调用会在每个摘要周期执行。只需在控制器中获取用户一次，然后将值分配给作用域

auth.getUser(auth.currentUser()).getValue(function(value){
    $scope.user = value;
});

在模板中，而不是

{{getUser（）}

auth.getUser(auth.currentUser()).getValue(function(value){
    $scope.user = value;
});

{{user}}