AngularJS通过指令显示json

Question

I have little problem with AngularJS, I wanted to make directive to display json imported from other website, directive working, but it doesnt show anything from angular binds(when i was using this code by just putting it hardway, everything was working).

HTML

<div ng-app="docsIsolateScopeDirective">
                    <div ng-controller="Controller">
                        <my-post info="post"></my-post>
                    </div>
                </div>

ANGULAR

(function(angular) {


'use strict';
angular.module('docsIsolateScopeDirective', ['ngSanitize', 'ui.bootstrap'])
  .controller('Controller', ['$scope','$http','$sce', function($scope, $http, $sce) {
    $http.get(link+'json=get_recent_posts&callback=&count=1').then(function(response, date, contents){
    $scope.contents = response.data.posts;
    $sce.trustAsHtml(contents);
});
  }])
  .directive('myPost', function() {
    return {
      restrict: 'E',
      scope: {
        customerInfo: '=info'
      },
      templateUrl: 'single-post.html'
    };
  });
})(window.angular);

SINGLE-POST.HTML

<article>
<div class="news-container">
    <span class="news-category"><a href="">{{content.categories[0].title}}</a></span>
    <h1 class="news-title">{{content.title}}</h1>
    <span class="news-date">{{content.date}}</span>
    <div class="news-image">
        <img src="{{content.thumbnail_images.full.url}}" />
    </div>
    <!-- .news-image -->
    <div class="news-entry">
        <p ng-bind-html="content.content">{{content.content}}</p>
    </div>
</div>

Any ideas? :)

Answer 1

You save your response as

$scope.contents = response.data.posts;

And you pass into directive variable post . Maybe you should pass contents ?

And also in your directive you have customerInfo not content .

Answer 2

You need to use customerInfo in the template single-post.html and also pass contents scope object to your directive

Additionally, Using trustAsHtml() method correctly.

$scope.contents = $sce.trustAsHtml(response.data.posts);

Here is a simplified example:

 (function(angular) { 'use strict'; angular.module('docsIsolateScopeDirective', []) .controller('Controller', ['$scope', function($scope) { $scope.contents = { title: "test" }; } ]) .directive('myPost', function() { return { restrict: 'E', scope: { customerInfo: '=info' }, template: '<article>\\ <h1 class="news-title">{{customerInfo.title}}</h1>\\ </article>' }; }); })(window.angular); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="docsIsolateScopeDirective"> <div ng-controller="Controller"> <my-post info="contents"></my-post> </div> </div> 

Answer 3

its always better to use jsonp for calls to outer domains. Can you try doing this?

$http.jsonp('some/trusted/url', {jsonpCallbackParam: 'callback'})

Whitelisting urls is also apt.

Answer 4

Pass $scope.contents to info.

 $scope.contents = response.data.posts;

<div ng-app="docsIsolateScopeDirective">
                    <div ng-controller="Controller">
                        <my-post info="contents"></my-post>
                    </div>
                </div>