Question

我对AngularJS没有什么问题，我想制作指令来显示从其他网站导入的json，指令工作，但它没有显示角度绑定的任何东西（当我使用这个代码时，只是把它放得很硬，一切正常）。

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);

单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

您需要在模板customerInfo中使用single-post.html，并将contents范围对象传递给您的指令

此外，正确使用trustAsHtml()方法。

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

这是一个简化的例子：

(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来调用外部域总是更好。你能尝试这样做吗？

$ http.jsonp（'some / trusted / url'，{jsonpCallbackParam：'callback'}）

白名单网址也很合适。

Answer 4

将$ scope.contents传递给info。

 $scope.contents = response.data.posts;

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

AngularJS通过指令显示json

4 个答案: