CODEWITHSUNDEEP
javascriptjqueryangularjs
user3131879
user3131879

Reputation: 1685

AngularJS - Trigger angular app to reload data

I have an app that gets JSON data from my backend service on page load. That works fine. My existing framework that I have allows each component (DIV) to be refreshed to get the latest data through a javascript function.

<div class="breakdownChart" ng-app="breakdown" ng-controller="PhoneListCtrl">
    <div ng-repeat="breakdownSummaryRow in breakdownResults.summary.rows" >
        <div class="breakdownChartRow" >
            <div class="breakdownChartValue">{{breakdownSummaryRow.positiveDuration}}</div>
        </div>
    </div>
</div>

var breakdownApp = angular.module('breakdown', []);

function PhoneListCtrl($scope, $http) {
    jsonDataUrl = "${jsonDataUrl}";
    scope = $scope;
    $scope.fetchData = function () {
        var httpRequest = $http.get('http://localhost:8080' + jsonDataUrl).success(function (data) {
            $scope.breakdownResults = data.data;
        });
    };
}

function load(extraParams) {}

I want the load function to trigger the angular app to recall the $http.get call and update the app with the latest data. The problem I am having is I dont have the $scope or $http context to pass to the PhoneListCtrl function. I am thinking that I should be telling the app to refresh and that will call the PhoneListCtrl function?

Can you help? Thanks in advance

Upvotes: 1

Views: 1387

Answers (1)

kmaal
kmaal

Reputation: 16

Create a button tag inside the div marked with ng-controller. e.g. After your ng-repeat div you can create that button.

Give it a ng-click with a function that will be defined on the controller javascript. That function can be your load() function and that will trigger the data reload. The function needs to be on the controller and the html needs to be inside controller space to work.

Upvotes: 0

Related Questions