Having difficulty with an ng-click not calling controller function in partial

Question

I've spent a couple days looking through the other answers for ng-click's not calling controller functions on here, and I still can not figure out what I am doing incorrectly.

I have a main script.js where the controller is defined:

 var dbApp = angular.module('dbApp', ['ngRoute','ngResource']);

    dbApp.config(function($routeProvider) {
            $routeProvider
                    .when('/managedevices', {
                            templateUrl : 'pages/managedevices.html',
                            controller  : 'manageDevicesController'
                    })
    });

   dbApp.controller('manageDevicesController', function($scope, $http) {
            $scope.message = 'manageDevicesController, you say?';
        var dataForThisTest = "json=" + encodeURI(JSON.stringify([
            {
                id: 1,
                firstName: "Test",
                lastName: "Person"},
            {
                id: 2,
                firstName: "Test2",
                lastName: "Person2"}
        ]));

            $scope.people = [];
            $scope.loadPeople = function() {
                var httpRequest = $http({
                    method: 'POST',
                    url: '/echo/json/',
                    data: dataForThisTest

                }).success(function(data, status) {
                    $scope.people = data;
                });
            };

    });

And then I have an HTML index file that is working perfectly with displaying the partial.

The partial looks like:

    <script type="text/javascript">
      if(typeof dbApp === 'undefined'){
        document.location.href="index.html";
      }
    </script> 
    <style>
    table {
      border: 1px solid #666;
    width: 100%;
    }
    th {
      background: #f8f8f8;
      font-weight: bold;
        padding: 2px;
    }
    </style>


    <body>
        <div class="jumbotron text-center">
            <p>{{ message }}</p>
        </div>

    <div ng-controller="manageDevicesController">
        <p>    Click <a ng-click="loadPeople()">here</a> to load data.</p>
    <table>
        <tr>
            <th>Id</th>
            <th>First Name</th>
            <th>Last Name</th>
    </tr>
    <tr ng-repeat="person in people">
        <td>{{person.id}}</td>
        <td>{{person.firstName}}</td>
    </tr>
</table>
</div>
    </body>

It doesnt seem as though the ng-click is working. Any idea why? I believe it is correctly in the ng-controller reference in the div!

Did you make sure that the request is successful? And why not $http.post("/echo/json", dataForThisTest)? — Camo
– Camo, Commented Mar 12, 2016 at 16:56
According to the debugger the loadPeople function isn't getting called, so the request never happens. And no real reason, if you suggest I change it I definitely will try that. — Hexum2600
– Hexum2600, Commented Mar 12, 2016 at 16:59

Nora · Accepted Answer · 2016-03-12 17:27:24Z

1

Try rewriting your loadPeople function like this:

$scope.loadPeople = function() {
    $http({
        method: 'POST',
        url: '/echo/json/',
        data: dataForThisTest
    }).then(function(data, status) {
        $scope.people = data;
    });
};

answered Mar 12, 2016 at 17:27

Nora

3,2812 gold badges23 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Having difficulty with an ng-click not calling controller function in partial

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related