0

I am trying to learn AngularJs, and I am stuck with 1 problem for hours now. My functions are being called twice. I have seen other Q&A 'Combating AngularJS executing controller twice' on stackoverflow it talks about use of $Route causes this, however in my code I don't use $Route.

JavaScript

var app = angular.module('mapSearch', ['ngResource']);
app.controller("MapCtrl", function ($scope, $resource) {
    $scope.Server = $resource('/dataservice/:action',
        {
            action: 'get', callback:'JSON_CALLBACK'
        },
        {
            Find: { method: 'post', isArray: true }            
        });

    $scope.results = [];

    $scope.map = null;

    $scope.search = function () {        
        var gbounds = $scope.map.getBounds();        

        for (var i = 0; i < $scope.results.length; i++) {
            $scope.results[i].RemoveMarker();
        }

        $scope.Server.Find({ bounds: gbounds }, function (datalist) {
            $scope.results = [];
            for (var i = 0; i < datalist.length; i++) {
                var data = datalist[i];
                var item = new DataElement(data.Name, data.Address, data.Phone, data.Web, data.Email, data.Longitude, data.Latitude);
                $scope.results.push(item);
                item.ShowOnMap();
            }
        });        
    }    
});

HTML 

<!DOCTYPE html>
<html ng-app="mapSearch" >
<body>
<div id="ngViewPane" ng-controller="MapCtrl">    
    <div id="finderMap" class="finderMap"></div>
    <div>    
    <address ng-repeat="DataItem in results">
        <div class="">
            <div class="">
                <span>{{DataItem.Name}}</span>
            </div>
            <div class="">
                <span>{{DataItem.Type}}</span>
            </div>
            <div class="resultItemDetail">
                <span>{{DataItem.Address}}</span>
            </div>           
        </div>        
    </address>    
</div>
</div>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/angular-animate.js"></script>
<script src="/Scripts/angular-cookies.js"></script>
<script src="/Scripts/angular-loader.js"></script>
<script src="/Scripts/angular-resource.js"></script>
<script src="/Scripts/angular-route.js"></script>
<script src="/Scripts/angular-sanitize.js"></script>
<script src="/Scripts/angular-scenario.js"></script>
<script src="/Scripts/angular-touch.js"></script>
<script src="/Scripts/scaffold/JavaScript.js"></script>
</body>
</html>
Community
  • 1
  • 1
Sanj
  • 3,770
  • 6
  • 26
  • 31
  • 2
    It's likely that you're instantiating two controllers. Another thing that gets people is when they realize that Angular is calling a function multiple times (for a filter, or when you use a function in an Angular expression), but I don't think that's the case here. In the code you've posted, the only function appears to be `search()` -- but I don't see this function being called anywhere. You might try creating a plunkr, showing more code, or just add some `console.log()` statements at the beginning of your controller to confirm how many are being instantiated. – Sunil D. May 06 '14 at 03:54
  • How do you know it is executed twice? – Narretz May 06 '14 at 08:54
  • @SunilD thanks you were right I was calling it twice. The map control had two listener attached. Stupid me. – Sanj May 06 '14 at 12:08

0 Answers0