Angular Js http GET响应显示在控制台日志中,但我无法显示ng-view

时间:2017-03-04 19:21:10

标签: javascript html angularjs

AngularJS HTTP GET响应显示在控制台日志中,但我无法在div中显示它。这是我的代码我是初学者我不明白为什么它不起作用所以我在这里问。

<!DOCTYPE html>
<html lang="en">
<base href="/">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
</head>
<body>
    <a href="test-wallpaper">testing</a>
    <div ng-app="myApp" ng-controller="newcontroller">
        <div ng-bind-html="resultdata"></div>
        <div ng-view></div>
        <script>
            var app = angular.module("myApp", ["ngRoute","ngSanitize"]);

            app.config(function($routeProvider,$locationProvider){
                $routeProvider
                    .when("/:id-wallpaper",{
                        templateUrl: "/new",
                        controller : "newcontroller"
                    });
                $locationProvider.html5Mode(true);
            });

            app.controller("newcontroller", function ($scope, $http, $routeParams) {
                $http({
                    url: "new",
                    method: "get",
                    params: { id: $routeParams.id }
                }).then(function (response) {
                    console.log(response.data);
                    $scope.resultdata = response.data;
                })

            });
        </script>
    </div>
</body>
</html>

1 个答案:

答案 0 :(得分:2)

请从您的DOM中删除<div ng-bind-html="resultdata"></div>并尝试创建$route模板。您还可以使用templateUrl: 'nameOfTemplate.html'为模板创建其他文件,而不是使用template param将其绑定为HTML-String。请参阅AngularJS routeProvider configuration

$ route configuration

app.config(function($routeProvider,$locationProvider){
    $routeProvider
        .when("/:id-wallpaper",{
            template: '<div>{{ resultdata }}</div>',
            controller : "newcontroller"
        });
    $locationProvider.html5Mode(true);
});

使用模板文件,它将如下所示:

app.config(function($routeProvider,$locationProvider){
    $routeProvider
        .when("/:id-wallpaper",{
            templateUrl: 'myFile.html',
            controller : "newcontroller"
        });
    $locationProvider.html5Mode(true);
});

myFile.html的内容(查看)

<div>{{ resultdata }}</div>