AngularJS can't call MVC controller

Question

I'm new on angularJS, im trying to call my MVC jsonresult for get data and so populate a list but my GetLogs function won't go to the MVC jsonresult /misc/getlogs (i also tryed with full url). Code is:

<body ng-app="Log">
<div ng-controller="MiscController">
    <ul ng-repeat="log in logs" class="notification-body">
        <li>
            <span class="unread">
                <a href="javascript:void(0);" class="msg">
                    <img src="/content/img/avatars/4.png" alt="" class="air air-top-left margin-top-5" width="40" height="40" />
                    <span class="from">John Doe <i class="icon-paperclip"></i></span>
                    <time>2 minutes ago</time>
                    <span class="subject">{{log.Name}}</span>
                    <span class="msg-body">Hello again and thanks for being a part of the newsletter. </span>
                </a>
            </span>
        </li>
    </ul>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        GetLogs();
    });

    function GetLogs() {
        var app = angular.module("Log", []);
        app.controller('MiscController', function ($scope, $http) {
            $http.post("/misc/getlogs")
            .success(function (data) { $scope.logs = data.logs; });
        });
    }
</script>

Pankaj Parkar · Accepted Answer · 2015-07-03 20:44:11Z

You shouldn't be call the getLogs() function on document.ready angular ng-app will run first and ask for the module and will throw and module error.

So the solution would be create a angular module when page gets loaded.

<script type="text/javascript">

    var app = angular.module("Log", []);
    app.controller('MiscController', function ($scope, $http) {
        $http.post("/misc/getlogs")
        .success(function (data) { $scope.logs = data.logs; });
    });
</script>

Update

If you want to load angular on the page lazily then do use angular.bootstrap that will initialize angular on the element silently. Before moving to this approach you need to remove ng-app directive from you page.

<script type="text/javascript">
    $(document).ready(function () {
        GetLogs();
    });

    function GetLogs() {
        var app = angular.module("Log", []);
        app.controller('MiscController', function ($scope, $http) {
            $http.post("/misc/getlogs")
            .success(function (data) { $scope.logs = data.logs; });
        });
        angular.bootstrap(document.body, ['Log'])
    }
</script>

Oh, thanks I used the function because I need to call it also from a button (for refresh). Anyway I can't reach my jsonresult (or actionresult) can't understand why
@Sauron I think if you are returning Json from your method that should have JSONBehaviour.AllowGet & should use $http.get instead of post ..
your "Update" work perfectly! Finally i can reach the jsonresult :) thanks man
@Sauron Glad to help you..would you mine to do upvote & accept answer..Thanks :)

Collectives™ on Stack Overflow

AngularJS can't call MVC controller

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related