Директива не загружает строку HTML как фактический HTML на AngularJS

Question

Я новичок в angularjs и использую эту директиву, как показано ниже. Когда эта директива загружается в файл HTML, она должна обрабатывать этот HTML как фактический HTML, а не как строку, но она не работает. Я использую угловую версию 1.4.7.

Пожалуйста помоги!! Я добавляю ниже HTML как String, потому что я получаю этот HTML как String из сервиса динамически. Так что это просто пример, который я добавляю сюда, чтобы увидеть, как мы можем отобразить значение html в angularjs html, если оно приходит в виде строки.

angular.module('my.directive', [])
    .directive("myDirective", function(){
        return {
            restrict: "EA",
            scope: false,
            template: "<div class='con'>"+
            "<div>'<p><i><strong>some text</strong></i></p>'</div>"+
            "</div>"
        };
    });

Я пробовал несколько способов исправить это здесь, но не повезло. Я пытался использовать "ng-bind-html-unsafe" и "ng-bind-html", но ни один из них не работает правильно.

Я даже пытался использовать прямой HTML с ng-bind-html и небезопасным, но мне тоже не повезло.

Я просто попробовал ниже HTML, но это не сработало.

<div ng-repeat="list in lists">
    <div class="content">
        <div ng-bind-html='<p><i><strong>some text</strong></i></p>'></div>
    </div>
</div>

Также ниже не работает.

<div ng-repeat="list in lists">
    <div class="content">
        <div ng-bind-html-unsafe='<p><i><strong>some text</strong></i></p>'></div>
    </div>
</div>

Answer 1

Я сделал некоторые изменения в вашем коде.

template: "<div class='con'>" +
                "<div><p><i><strong>some text</strong></i></p></div>" +
                "</div>"

AnuglarJS - Директивы

Параметр restrict обычно устанавливается на:

• 'A' - соответствует только имени атрибута
• 'E' - соответствует только имени элемента
• 'C' - соответствует только имени класса

В вашей директиве у вас есть это ограничение: restrict: "EA", то вы можете использовать в качестве элемента:

<my-directive></my-directive>,

(function() {
  angular.module('my.directive', [])
    .directive("myDirective", function() {
      return {
        restrict: "EA",
        scope: false,
        template: "<div class='con'>" +
          "<div><p><i><strong>some text</strong></i></p></div>" +
          "</div>"
      };
    })
    .controller("Controller", ["$scope",
      function($scope) {
        $scope.title = "my-directive";
        $scope.lists = [{
          "id": 1,
          "text": "1"
        }, {
          "id": 2,
          "text": "2"
        }];
      }
    ]);
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="my.directive">
  <div data-ng-controller="Controller">
    <h1 data-ng-bind="title"></h1>

    <div data-ng-repeat="list in lists">
      <div class="content">{{list.id}}
        <my-directive></my-directive>
      </div>
    </div>
  </div>
</div>

---

Обновление: Использование ngSanitize:

https://docs.angularjs.org/api/ngSanitize

В текущей разметке нужно добавить двойные квоты ",

<div data-ng-bind-html="'<p><i><strong>some text</strong></i></p>'"></div>

И добавьте зависимость ngSanitize в ваш модуль.

Что-то вроде этого:

(function() {
  angular.module("my.directive", ["ngSanitize"])
    .controller("Controller", ["$scope",
      function($scope) {
        $scope.title = "my-directive";
        $scope.lists = [{
          "id": 1,
          "text": "1"
        }, {
          "id": 2,
          "text": "2"
        }];
      }
    ]);
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-sanitize.min.js"></script>
<div data-ng-app="my.directive">
  <div data-ng-controller="Controller">
    <h1 data-ng-bind="title"></h1>

    <div ng-repeat="list in lists">
      <div class="content">
        <div data-ng-bind-html="'<p><i><strong>some text</strong></i></p>'"></div>
      </div>
    </div>
  </div>
</div>