javascript - Ionic/Angular，将 JSON/Array 值作为 HTML 传递

Question

我正在使用 Ionic Framework 和 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'
  }];

这就是我的 Controller 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)

Answer 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);
                });
            }
        };
    };
})();