AngularJSは私がAngularJSと少し問題を抱えているディレクティブ

Question

でJSONを表示し、私は他のウェブサイトからの輸入JSON、ディレクティブの作業を表示するには、ディレクティブを作りたかったが、私はこのコードを使用していたとき、それはちょうどそれを置くことによって、角度バインド（から何かを示してdoesntのすべてが機能していた）。

HTML

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

アンギュラ

(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> 

任意のアイデア？ :)

Answer 1

あなたは

$scope.contents = response.data.posts; 

としてあなたの応答を保存して、あなたはディレクティブ変数postに渡します。多分contentsを渡す必要がありますか？

そしてまたあなたの指示であなたがcustomerInfoないcontentを持っています。

Answer 2

あなたは、テンプレートsingle-post.htmlでcustomerInfoを使用しても正しくtrustAsHtml()方法を使用して、さらに自分のディレクティブに

をcontentsスコープオブジェクトを渡す必要があります。

(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

外ドメインへのコールにJSONP使用するその常により良い：ここ

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

は、簡略化した例です。 これをやり直すことはできますか？

$ http.jsonp（ 'いくつかの/信頼済み/ URL'、{jsonpCallbackParam： 'コールバック'}）

URLをホワイトリストにもなりやすいです。

Answer 4

パス$は情報にscope.contents。

$scope.contents = response.data.posts; 

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