Question

我有一个JSON文件，在对象中有一个html标记。是否可以使用此HTML属性？

JS

var app = angular.module('app', []);

app.controller('mainCtrl', function ($scope) {
    $scope.colors = [
        {
            "color": "red",
            "value": "#f00",
            "message": "Simple message"
        },
        {
            "color": "green",
            "value": "#0f0",
            "message": "Message with <strong>HTML</strong> tags"
        },
        {
            "color": "blue",
            "value": "#00f",
            "message": "Am I going to work? I should not!"
        },
        {
            "color": "magenta",
            "value": "#f0f",
            "message": "<img src='https://c2.staticflickr.com/4/3684/11803460685_dd40050e8e_h.jpg'>"
        }
    ]

    $scope.currentMessage = "";

    $scope.popupBtn = function (message) {

        // set current message
        $scope.currentMessage = message;

        // if popup is not open, open it
        if (!($scope.popupBlcok)) {
            $scope.popupBlock = true;
        }
    }

});

CSS

.alert-block {
  background-color: coral;
  color: white;
  display: none;
 }

  .popup-container {
     display: block;
   }

HTML

<body ng-app="app">
    <div ng-controller="mainCtrl">
        <ul class="block-elements">
            <li ng-repeat="details in colors">
                <button ng-click="popupBtn(details.message)" ng-style="{ color: details.color }">Click Me</button>
            </li>
        </ul>

        <div class="alert-block" ng-class="{'popup-container': popupBlock}">
            <div>
                <a>{{currentMessage}}</a>
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
    </div>
</body>

Answer 1

您需要$sce和ng-bind-html一起使用。所以，你应该先替换：

<a>{{currentMessage}}</a>

与

<a ng-bind-html="currentMessage"></a>

并在popupBtn范围方法中：

$scope.currentMessage = $sce.trustAsHtml(message);

上述内容将迫使Angular信任您的HTML代码段以进行跨方脚本编写。

你走了：

var app = angular.module('app', []);

app.controller('mainCtrl', function($scope, $sce) {
  $scope.colors = [{
    "color": "red",
    "value": "#f00",
    "message": "Simple message"
  }, {
    "color": "green",
    "value": "#0f0",
    "message": "Message with <strong>HTML</strong> tags"
  }, {
    "color": "blue",
    "value": "#00f",
    "message": "Am I going to work? I should not!"
  }, {
    "color": "magenta",
    "value": "#f0f",
    "message": "<img src='https://c2.staticflickr.com/4/3684/11803460685_dd40050e8e_h.jpg'>"
  }]

  $scope.currentMessage = "";

  $scope.popupBtn = function(message) {

    // set current message
    $scope.currentMessage = $sce.trustAsHtml(message);

    // if popup is not open, open it
    if (!($scope.popupBlcok)) {
      $scope.popupBlock = true;
    }
  }

});

<body ng-app="app">
  <div ng-controller="mainCtrl">
    <ul class="block-elements">
      <li ng-repeat="details in colors">
        <button ng-click="popupBtn(details.message)" ng-style="{ color: details.color }">Click Me</button>
      </li>
    </ul>

    <div class="alert-block" ng-class="{'popup-container': popupBlock}">
      <div>
        <a ng-bind-html="currentMessage"></a>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
  </div>
</body>

Answer 2

尝试使用此功能显示html属性

<div ng-bind-html="currentMessage"></div>

如何在Angular中使用JSON文件中的HTML标记/属性

2 个答案: