Директива не загружает 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 - Directives

Ограничить вариант, как правило, устанавливается:

• '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>

---

Update: Использование 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>