使用AngularJS从JSON字符串呈现HTML时出现问题？

Question

我试图使用$ sce.trustAsHtml在JSON字符串中获取HTML标记，并使用AngularJS将其呈现为功能HTML。 我非常有信心这个问题是我的标记问题，因为我尚不十分清楚如何从JSON提取信息，而不是直接将所需的HTML放入控制器，如Angular网站所示。

从我的details.html部分来看：

    <div ng-bind-html="$sce.trustAsHtml(whichItem.item1.widget)"></div>

从我的controller.js文件中：

hashControllers.controller('DetailsController', ['$scope', '$http','$routeParams', '$sce', function($scope, $http, $routeParams, $sce) {
  $http.get('js/list_data.json').success(function(data) {
    $scope.hash = data;
    $scope.$sce = $sce;
    $scope.whichItem = $routeParams.itemId;

    if ($routeParams.itemId > 0) {
      $scope.prevItem = Number($routeParams.itemId)-1;
    } else {
      $scope.prevItem = $scope.hash.length-1;
    }

    if ($routeParams.itemId < $scope.hash.length-1) {
      $scope.nextItem = Number($routeParams.itemId)+1;
    } else {
      $scope.nextItem = 0;
    }

  });
}]);

从我的JSON文件中：

[
  {
    "tag":"#StandWithPP",
    "shortName":"StandWithPP",
    "longName":"Stand With Planned Parenthood",
    "firstUse":"January 2012",
    "numUses":"55.7",
    "origin":"On a Tuesday in January 2012, the Susan G. Komen Foundation, which annually contributed $680,000 to Planned Parenthood, announced in a largely political move that it planned to cut off that funding. By the Friday of that week, more than 100,000 people had tweeted in outrage, and Komen restored funding. The hashtag has only grown from there, taking over all major forms of social media, extending as far as dating apps such as OKCupid, which allows users to post a badge on their profile with the tag.",
    "category":"feminism",
    "widget":"<a class='twitter-timeline' data-dnt='true' href='https://twitter.com/hashtag/StandWithPP' data-widget-id='964987220951265280'>#StandWithPP Tweets</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');</script>"
  }
]

我已经经历了几次迭代的方法来从JSON调用信息并“信任”它，但是我发现没有一种语法有效。

更新：我意识到Twitter小部件具有足够的一致性，可以使用Angular标记为JSON文件中的每个项目填充它。

这是新的HTML：

<a class="twitter-timeline" data-dnt="true" href="https://twitter.com/hashtag/{{hash[whichItem].shortName}}" data-widget-id="{{hash[whichItem].widget}}">{{hash[whichItem].tag}} Tweets</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

以及关联JSON中一项的示例：

[
  {
    "tag":"#StandWithPP",
    "shortName":"StandWithPP",
    "longName":"Stand With Planned Parenthood",
    "firstUse":"January 2012",
    "numUses":"55.7",
    "origin":"On a Tuesday in January 2012, the Susan G. Komen Foundation, which annually contributed $680,000 to Planned Parenthood, announced in a largely political move that it planned to cut off that funding. By the Friday of that week, more than 100,000 people had tweeted in outrage, and Komen restored funding. The hashtag has only grown from there, taking over all major forms of social media, extending as far as dating apps such as OKCupid, which allows users to post a badge on their profile with the tag.",
    "category":"feminism",
    "widget":"964987220951265280"
  }
]

好消息是，它有效！ 坏消息是，第一次加载部分时不会加载。 您必须等待几分钟，然后刷新页面以获取实际的时间轴小部件，而不是错误默认值的简单链接。 （并且一旦返回列表视图，就必须再次重复该过程。）

最初，我认为引入JSON数据存在问题，然后尝试对原始小部件标记进行简单的复制粘贴检查。 但是，即使不使用AngularJS表达式绑定标记的脚本最初也会失败。 我意识到这是Angular的内置jquite无法呈现内联脚本标签的问题，因此我添加了jQuery库来修复它。

现在，没有表达式绑定的窗口小部件在部分加载的初始加载时效果很好，但是我仍然必须等待几分钟并重新加载才能使自定义窗口小部件起作用！ 我认为这与AngularJS的性质及其调用数据的方式有关。 这是一个迷失的原因吗？ 修复它会破坏使用AngularJS的目的吗？

Answer 1

阿曼达（Amanda），您走得湿滑；）您的代码越来越复杂，需要复杂的解决方案。

最有可能解决您的问题的方法是，添加一条指令，代码如下所示：

hashControllers.controller('DetailsController', function($scope) {
  $scope.whichItem =  {
    "tag":"#StandWithPP",
    "shortName":"StandWithPP",
    "longName":"Stand With Planned Parenthood",
    "firstUse":"January 2012",
    "numUses":"55.7",
    "category":"feminism",
    "widget":"<a class='twitter-timeline' data-dnt='true' href='https://twitter.com/hashtag/StandWithPP' data-widget-id='964987220951265280'>#StandWithPP Tweets</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');</script>"
  }
});

hashControllers.directive('widget', ['$compile', function($compile) {
    return function(scope, elem, attrs) {
        var el = angular.element(scope.whichItem.widget); //create markup
        var compiled = $compile(el); //compile the view into a function.
        elem.append(el); // add it to view
        compiled(scope); // adding scope, you can actually pass variables to you templete here
    };
}]);

和模板：

<div widget="{{whichItem.widget}}"></div>

希望对您有所帮助，编码愉快！