Мне нужна ваша помощь! Я пытаюсь импортировать файл JSON с помощью угловых. Единственная проблема заключается в том, что файл json импортируется с другого веб-сайта, а теги html отображаются в виде обычного текста. И вот мой вопрос, есть ли шанс сделать эти теги обычным HTML не видимым текстом?

Html:

<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
        <script src="maincontroller.js" type="text/javascript"></script>
    </head>
    <body bgcolor="lightblue">
        <div ng-app="mainApp" ng-controller="mainController">
            <div id="content" style="width: 500px; height: 500px; background-color: green; ">
                <div ng-repeat="content in contents">
                    <h2>{{content.title}}</h2>
                    <p>{{content.date}}</p>
                    <p>{{content.info}}</p>
                    <p>{{content.content}}</p>
                    <p>{{content.url}}</p>
                </div>
            </div>
        </div>
    </body>
</html>

Maincontroller.js

var myapp=angular.module('mainApp',['ngSanitize']);
myapp.controller('mainController',function($scope,$http){
    $http.get('/WP/?json=get_recent_posts').then(function(response, date){
        $scope.contents = response.data.posts;
        alert("success");
        console.log(response)
    }, function(error){
        $scope.contents = [{title:"<h4> Error </h4>",date:"<p> JSON invalid </p>"}]; 
        alert("error");
        console.log(response)
    })
});
2
Lapsio 12 Янв 2017 в 12:30

5 ответов

Лучший ответ

Попробуйте это решение:

Ваш файл maincontroller.js

Я добавил $sce.trustAsHtml, чтобы html-файл мог знать, что контент имеет html-теги

 var myapp=angular.module('mainApp',['ngSanitize']);
    myapp.controller('mainController',function($scope,$http, $sce){
        $http.get('http://localhost/wordpress/?json=get_recent_posts').then(function(response, date){
            $scope.contents = response.data.posts;
            $scope.info = $sce.trustAsHtml(contents.info);
            alert("success");
            console.log(response);
        }, function(error){
            $scope.contents = [{title:"<h4> Error </h4>",date:"<p> JSON invalid </p>"}]; 
            alert("error");
            console.log(response);
        })
    });

И ваш index.html

Добавить файл angular-sanitize.js, если вы еще не добавили. и используйте ng-bind-html в своем HTML-теге.

<!doctype html>
<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.1/angular-sanitize.js"></script>
    <script src="mainController.js" type="text/javascript"></script>
    </head>
    <body bgcolor="lightblue">
        <div ng-app="mainApp" ng-controller="mainController">
            <div id="content" style="width: 500px; height: 500px; background-color: green; ">
                <div ng-repeat="content in contents">
                    <h2 ng-bind-html="content.title">{{content.title}}</h2>
                    <p>{{content.date}}</p>
                    <p>{{content.info}}</p>
                    <p ng-bind-html="content.content">{{content.content}}</p>
                    <p>{{content.url}}</p>
                </div>
            </div>
        </div>
    </body>
</html>
1
prakash tank 12 Янв 2017 в 10:57

Попробуй это

https://plnkr.co/edit/JcW2fxcISsjYKpXGBBkp?p=preview

Введите ngSanitize перед использованием ngBindHtml

var app = angular.module('plunker', ['ngSanitize']);....

<div ng-bind-html="scopeVariable"></div>
1
Sharmila 12 Янв 2017 в 09:53

Если я хорошо понял, вы должны использовать что-то вроде этого в своем JavaScript:

myapp.controller('mainController',function($scope,$http, $sce){
    $http.get('/WP/?json=get_recent_posts').then(function(response, date){
         $scope.contents = response.data.posts;
         $scope.title = $sce.trustAsHtml(contents.title);
         alert("success");
         console.log(response)
    }, function(error){
         $scope.title = $sce.trustAsHtml("<h4> Error </h4>");
         $scope.date = $sce.trustAsHtml("<p> JSON invalid      </p>");
         alert("error");
        console.log(response)
    })
});

И это в вашем HTML:

<p ng-bind-html="title" class="htmlComment">
1
Francesca 12 Янв 2017 в 09:39

Вы можете использовать ngBindHtml. Отредактируйте ваш код, как показано ниже

<span ng-bind-html="content.title">{{content.title}}</span>
1
digit 12 Янв 2017 в 09:39

Вместо использования экспресс-связывания {{}} используйте ng-bind-html-unsafe. Также будет отображаться тег html.

Пример

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  
  $scope.text = "<strong>this is html</strong>";
});
<body ng-controller="MainCtrl">
  Hello {{name}}!
  <br/>
  <ul>
    <li>{{text}}</li>
    <li ng-bind-html-unsafe="text"></li>
  </ul>
</body>

Out будет как

Hello World! 
<strong>this is html</strong>
this is html
1
ricky 12 Янв 2017 в 09:38