角度Js http GET响应显示在控制台日志中，但是我不能显示ng-view

时间：2021-10-09 17:49:44

AngularJS HTTP GET response is displaying in console log but I'm not able to display it inside div. Here is my code I'm beginner I don't figure out why it is not working so I'm asking here.

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 个解决方案

#1

2  

Please remove <div ng-bind-html="resultdata"></div> from your DOM and try to create a $route template. You will also be able create an additional file for your template by using templateUrl: 'nameOfTemplate.html' instead of binding it as an HTML-String by using template param. Please refer AngularJS routeProvider configuration.

请从您的DOM中删除

并尝试创建一个$route模板。您还可以使用templateUrl: 'nameOfTemplate为模板创建一个附加文件。html'而不是使用模板param将其绑定为html字符串。请参考AngularJS routeProvider配置。

$route configuration

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

With an template file it would look like this:

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

Content of myFile.html (View)

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

#1

2  

Please remove <div ng-bind-html="resultdata"></div> from your DOM and try to create a $route template. You will also be able create an additional file for your template by using templateUrl: 'nameOfTemplate.html' instead of binding it as an HTML-String by using template param. Please refer AngularJS routeProvider configuration.

请从您的DOM中删除

并尝试创建一个$route模板。您还可以使用templateUrl: 'nameOfTemplate为模板创建一个附加文件。html'而不是使用模板param将其绑定为html字符串。请参考AngularJS routeProvider配置。

$route configuration

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

With an template file it would look like this:

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

Content of myFile.html (View)

<div>{{ resultdata }}</div>
标签：

相关文章