Question

我可以用文本创建一个简单的变量并显示它很好，但是如果我使用

$http.get()

它破坏了我的控制器，屏幕上没有显示任何内容。

这是我的index.html文件。

<!DOCTYPE html>
<html ng-app="ietm">

<head>
    <link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
    <script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>

<body ng-controller="IetmController">
    <!--  TOC Header  -->
    <header>

    </header>

    <!--  Manuals Container  -->
    <div class="list-group">
        <div class="list-group-item" ng-repeat="manual in toc.manuals">
            <h3>{{manual.title}} <em class="pull-right">{{manual.tm}}</em></h3>
        </div>
    </div>
</body>

</html>

这是我的app.js文件

(function() {
    var app = angular.module('ietm', []);

    app.controller('IetmController', ['$http', function($http) {
        var toc = this;
        toc.manuals = [];
        $http.get('main-TOC.json').success(function(data) {
            toc.manuals = data;
        });
    }]);
})();

如果重要，这是我的JSON

[{
        "docid": "TO2JF11031",
        "location": "2j-f110-3-1",
        "file": "2jf11031.sgm",
        "tm": "2J-F110-3-1",
        "title": "General Information",
        "update": "Thu Jul 7 12:39:17 EDT 2016"
    },
    {
        "docid": "TO2JF11032",
        "location": "2j-f110-3-2",
        "file": "2jf11032.sgm",
        "tm": "2J-F110-3-2",
        "title": "Support Equipment",
        "update": ""
    },
    {
        "docid": "TO2JF11033",
        "location": "2j-f110-3-3",
        "file": "2jf11033.sgm",
        "tm": "2J-F110-3-3",
        "title": "Disassembly",
        "update": "Thu Jul 7 12:39:18 EDT 2016"
    }
]

Answer 1

试试这个：

$http.get('main-TOC.json')
.then(function success(response) {
    toc.manuals = response.data;
}, function error(response) {
    // your code when http get fails (optional)
});

原因是.success()的{{1}}方法已弃用v1.5，自v1.6起不再可用。有关更多信息，请查看以下问题：

Why are angular $http success/error methods deprecated? Removed from v1.6?

Answer 2

首先在评论中提及，删除success并添加then以捕获回复。

$http.get('main-TOC.json')
    .then(function(response) {
        toc.manuals = response.data;
    }, function(response) {

    });

那可以解决错误。但数据仍未显示在html中。因为在您的控制器this中分配给变量。所以你需要在html中使用controller as toc。

<body ng-controller="IetmController as toc">

demo

$ http打破了我的角度控制器

2 个答案: