Angularjs ngInit重复3次-ngClick一次

Question

I know there are a lot of other questions covering this topic, but none really answer my question. I have a function that retrieves data from my db. Now when i run the function on ngInit the function runs three times, but on an ngClick it only runs once, which is what I want.

I read in a couple of posts that it is normal for the function to repeat multiple times, because of the angular watchers that watches for the code to change. Now I really don't mind that the code is repeating, but the issue is that I set a variable to true when the function starts and to false when I get the data. But now my variable gets set to false , and the code runs again. So my variable gets changed prematurely.

Example:

controller.getItem = function(){
    controller.loading = true;
    service.getSelectedItem($routeParams._id).then(function(response){
        if(response.data.state === 'success'){
            controller.myItem = response.data.item;
            controller.loading = false;
        }
    });

}

HTML:

<div id="item">
<!-- remove this comment to test ngInit -->
<!-- <div id="item" ng-init="controller.getItem()"> -->

    <button id="clickMe" ng-click="controller.getItem()">Get data</button>

    <div class="panel panel-new">

        <div class="panel-header">

            <div class="row">

                <div class="col-xs-12">
                    <h4>My Item - {{ controller.myItem._id }} 
                    <small>added on: {{ controller.myItem.dateAdded | date: 'dd MMM yyyy' }}</small></h4>
                </div>

            </div> <!-- Close div for .row -->

        </div> <!-- Close div for .panel-header -->

    </div>

</div>

Now my loading screen disappears and my content is still undefined . Only after running three times does the content actually get populated.

As I said, when this function runs on an ngClick it works perfectly and only runs once, but on an ngInit it runs 3 times and does not work as intended.

I am not sure how to approach this issue.

Answer 1

Can you please little bit more detail. It should be better you could use nginit inside specific controller. Once you calling particular controller then it will run perfectly according to behavior.

Answer 2

Okay, so after a lot of debugging, I finally found the issue. The problem was that I had this in my index page:

<div ng-if="auth" id="ngView" class="ngView">
    <div ng-view>
    </div>
</div>

So what was I think was happening is that it created a view, ran the function, created a view, ran the function. So that is why everything was happening more than once.