AngularJS无法调用MVC控制器

时间:2015-07-03 20:30:33

标签: asp.net-mvc angularjs asp.net-mvc-4

我是angularJS的新手,我试图调用我的MVC jsonresult获取数据,因此填充列表但我的GetLogs函数不会去MVC jsonresult / misc / getlogs(我也试过完整的网址)。代码是:

<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>

1 个答案:

答案 0 :(得分:1)

您不应该调用document.ready ng-app上的getLogs()函数将首先运行并询问模块并抛出模块错误。

因此解决方案是在页面加载时创建一个角度模块。

<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>

<强>更新

如果你想懒惰地在页面上加载角度,那么请使用angular.bootstrap来静默地初始化元素上的角度。在转向此方法之前,您需要从您的页面中删除ng-app指令。

<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>