Блог

Главная - Вопросы по программированию - Как именно работает ng-bind-html

Как именно работает ng-bind-html

#angularjs

#angularjs

Вопрос:

В этом коде, взятом из Angular.org:

 <!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example16-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular-sanitize.js"></script>
  <script src="script.js"></script>



</head>
<body ng-app="ngBindHtmlExample">
    <div ng-controller="ngBindHtmlCtrl">
   <p ng-bind-html="myHTML"></p>
  </div>
</body>
</html>

Он отображает текст:

Я — HtmlString со ссылками! и другие материалы

Я понятия не имею, откуда взят этот текст. Я искал два файла javascript, и его там нет. Если я изменю «myHTML» на какой-нибудь другой текст, ничего не отобразится. Может кто-нибудь, пожалуйста, объяснить, что такое ng-bind-html?

Ответ №1:

Я предполагаю, что вы говорите о примере из:https://docs.angularjs.org/api/ng/directive/ngBindHtml

В каком случае это находится в контроллере в файле script.js:

 angular.module('ngBindHtmlExample', ['ngSanitize'])

.controller('ngBindHtmlCtrl', ['$scope', function ngBindHtmlCtrl($scope) {
  $scope.myHTML =
     'I am an <code>HTML</code>string with <a href="#">links!</a> and other <em>stuff</em>';
}]);

Следующая строка задает это:

 $scope.myHTML =
         'I am an <code>HTML</code>string with <a href="#">links!</a> and other <em>stuff</em>';

Надеюсь, это поможет.

Комментарии:

1. Я заметил, что упустил из виду script.js . Где хранится этот скрипт?

2. Вы можете получить доступ к нему в Chrome, нажав клавишу f12, перейдя на вкладку Исходники, перейдя в папку examples / example-example16, а затем script.js

3. Так это встроенный скрипт в Google Chrome?

4. Нет, скрипты могут быть автоматически загружены с сервера и необязательно должны поставляться с html в теге <script>

5. Что не ясно, так это то, что script.js файл содержит внедрение зависимости «ngSanitize», но это не используется. Итак, как выполняется очистка?