Манипулировать строкой html с помощью Jquery (в приложении Angular для редактора wysiwyg)

0

У меня есть редактор wysiwyg, который использует $ scope.variable как источник HTML.

Теперь мне нужно вставить divs в определенные части строки HTML. Поэтому я могу программно добавлять, добавлять, удалять и т.д. Части отображаемого содержимого в wysiwyg. Но я не могу заставить манипуляции работать.

Должно быть просто вставить вещи в дом правильно? Но в этом примере ничего не добавляется:

JAVASCRIPT:

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

app.controller("ctrl", function($scope) {

  $scope.obj = {};

  // html string
  $scope.obj.htmlString = ' <div class="wrapper-div">wrapper div<div class="container">container div<div class="inner-div">inner div</div></div></div>';

  // element inserted into html string ( virtual dom )
  $($scope.obj.htmlString).find('.container').prepend('<b>text inserted into container div</b>');

  // insert the elements to dom
  angular.element('.insert-here').prepend($scope.obj.htmlString);

});

HTML:

<body ng-app="app" ng-controller="ctrl">
  {{ obj.htmlString }}
  <div class="insert-here">
  </div>
</body>

PLUNKER:

https://plnkr.co/edit/dCzQF6YYth5NFOTkVahy?p=preview

  • 0
    .find('.container') - обратите внимание на .
  • 0
    Спасибо! Опечатка, которую я исправил сейчас, но я не имею никакого значения .. Проверьте plunkr ..
Теги:
wysiwyg

2 ответа

0
Лучший ответ

Вам нужно использовать селектор.container и получить html из DOM

var htmlString = ' <div class="wrapper-div">wrapper div<div class="container">container div<div class="inner-div">inner div</div></div></div>';
// element inserted into html string ( virtual dom )
var $html = $('<div>' + htmlString + '</div>').find('.container').prepend('<b>text inserted into container div</b>');
htmlString = $html.html();
alert(htmlString);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
0

Вы можете использовать модуль ngSanitize, чтобы получить директиву ngBindHtml для выполнения этого. Вам не нужно манипулировать DOM напрямую при использовании Angular. Проверьте "Мышление в AngularJS", если у меня есть фон jQuery?

var app = angular.module("app", ['ngSanitize']);
app.controller("ctrl", function($scope) {
    $scope.insertHere = "<b>text inserted into container div</b>"
}); 
<div class="insert-here" ng-bind-html="insertHere"></div>

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

app.controller("ctrl", function($scope) {
  $scope.insertHere = "<b>text inserted into container div</b>"
});
/* Styles go here */

.insert-here{
  border: 2px solid red;
  padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-sanitize.min.js"></script>

<body ng-app="app" ng-controller="ctrl">
  {{ obj.htmlString }}

  <div class="wrapper-div">wrapper div
    <div class="container">container div
      <div class="inner-div">inner div</div>
    </div>
  </div>
  <div class="insert-here" ng-bind-html="insertHere">
  </div>
</body>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню