Question

我正在尝试在JSON字符串中使用HTML标记，并使用$ sce.trustAsHtml将其渲染为使用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

阿曼达，你在一条湿滑的路上;）您的代码变得越来越复杂，需要复杂的解决方案。

最有可能解决您的问题，您将添加一个指令，您的代码将如下所示：

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>

我希望这会有所帮助，快乐的编码！

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

1 个答案: