Ionic / Angular，将 JSON/Array 值作为 HTML 传递答案

【问题标题】：Ionic / Angular, pass JSON/Array value as HTMLIonic / Angular，将 JSON/Array 值作为 HTML 传递
【发布时间】：2016-10-31 11:51:42
【问题描述】：

我正在使用 Ionic 框架和 Angular 构建一个移动应用程序。我的服务 JS 中有这个数组 （对于这个演示，只传递了一个值）：

  // Some fake testing data
  var articles = [{
    id: 0,
    title: 'This is the title',
    intro: 'This is the intro.',
    image: 'img/ben.png',
    published: '31/10/2016',
    text: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna lacus, aliquam sed ante vitae, ornare fermentum ipsum. Duis pellentesque.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna lacus, aliquam sed ante vitae, ornare fermentum ipsum. Duis pellentesque.</p>',
    url: 'http://www.domain.com/article'
  }];

这就是我的控制器 JS 在这个特定页面上的样子：

.controller('NewsDetailCtrl', function($scope, $stateParams, Articles) {
  $scope.article = Articles.get($stateParams.articleId);
})

HTML 模板如下所示：

<ion-view view-title="Article">
  <ion-content class="padding">
    <img ng-src="{{article.image}}" style="width: 64px; height: 64px">
    <p>
      {{article.text}}
    </p>
  </ion-content>
</ion-view>

现在，在应用程序中，{{article.text}} 按原样传递，而不是作为 HTML。你可以看看下面的图片：

我该如何解决这个问题？ （对不起，如果这是一个菜鸟问题，我刚刚开始使用 Angular）

【问题讨论】：

标签： javascript angularjs json ionic-framework

【解决方案1】：

你可以使用

$scope.text= $sce.trustAsHtml(articles.text);
<p ng-bind-html="text"></p>

或者写一个这样的指令，

(function() {
    'use strict'; 
    angular
        .module('app')
        .directive('dynamic', dynamic);

    dynamic.$inject = ['$compile'];

    function dynamic($compile) {
        return {
            restrict: 'A',
            replace: true,
            link: function (scope, ele, attrs) {
                scope.$watch(attrs.dynamic, function(html) {
                    ele.html(html);
                    $compile(ele.contents())(scope);
                });
            }
        };
    };
})();

【讨论】：

【解决方案2】：

使用 ng-BindHtml 代替 ng-model。 ng-model 的内容已经过清理。

请参阅https://docs.angularjs.org/api/ng/directive/ngBindHtml上的示例

您也可以使用 $sce.trustAsHtml()：

$scope.html = '<p>html content</p>';
$scope.trustedHtml = $sce.trustAsHtml($scope.html);

更多信息请见：https://docs.angularjs.org/api/ng/service/$sce

【讨论】：

我的这个特定页面的控制器如下所示： .controller('NewsDetailCtrl', function($scope, $stateParams, Articles) { $scope.article = Articles.get($stateParams.articleId) ; }) 我应该改变什么？
.controller('NewsDetailCtrl', function($scope, $stateParams,$sce, Articles) { $scope.article = Articles.get($stateParams.articleId); $scope.htmlText = $ sce.trustAsHtml($scope.article.text); })

【解决方案3】：

您可以使用$sanitize 输入，然后使用ng-bind-html 绑定。

上面的链接中提供了示例。 $sanitize 将提供没有不安全标记的 html。

【讨论】：

【解决方案4】：

您需要为此使用 $sce 服务 .. 参考此

https://docs.angularjs.org/api/ng/service/$sce

$scope.text= $sce.trustAsHtml(articles.text);

并且在你的控制器中像这样使用它，确保你在使用它之前在你的控制器中注入了 $sce

<p ng-bind-html="text"></p>

谢谢

【讨论】：