Хобрук: Ваш путь к мастерству в программировании

перетаскивание (jqyoui-droppable) не работает в AngularJS

Я хочу сделать пунктирную строку, чтобы заполнить пробелы подходящим (перетаскиваемым) словом, чтобы завершить предложение.

строка типа:

The ______ brown ______ jumps over the ______ dog.

такие слова, как: быстрый, лиса, ленивый

но когда я связываю строку с ng-bind-html, jqyoui-droppable не работает в возвращаемой строке. Не удалось поместить кнопку (перетаскиваемую клавишу) в строку пробела.

  $scope.gapList = [];

  $scope.string = "The quick brown fox jumps over the lazy dog.";
  $scope.keys = ['quick','fox','lazy'];

  $scope.createDottedString = function () {
      for (var key in $scope.keys) {
          $scope.string = $scope.string.replace($scope.keys[key], '<em data-drop="true" data-jqyoui-options  jqyoui-droppable  ng-model="$scope.gapList" > ____________ </em>');
      }
      return $sce.trustAsHtml($scope.string);

  };

HTML: <div ng-bind-html="createDottedString()"></div>

вот ссылка на plnkr: демонстрация

Я использовал этот плагин jqyoui-droppable для перетаскивания с помощью jqueryUI.

javascript drag-and-drop jquery angularjs jquery-ui
16.11.2016

Ответы:


1

На самом деле мне нужно перекомпилировать возвращенную строку (как HTML), поэтому я написал директиву, как показано ниже:

bind-unsafe-html="unsafeString"

Где unsafeString — моя возвращаемая строка.

Пользовательская директива (bind-unsafe-html), например:

app.directive('bindUnsafeHtml', ['$compile', function ($compile) {
    return function(scope, element, attrs) {
        scope.$watch(
            function(scope) {
                // watch the 'bindUnsafeHtml' expression for changes
                return scope.$eval(attrs.bindUnsafeHtml);
            },
            function(value) {
                // when the 'bindUnsafeHtml' expression changes
                // assign it into the current DOM
                element.html(value);

                // compile the new DOM and link it to the current
                // scope.
                // NOTE: we only compile .childNodes so that
                // we don't get into infinite loop compiling ourselves
                $compile(element.contents())(scope);
            }
        );
    };
}]);

Я получил несколько ответов в #stackoverflow, связанных с компиляцией строк (html), которые помогли мне найти это решение.

16.12.2016
Новые материалы
Еженедельный выпуск React 75
Добро пожаловать в 75-й выпуск React Weekly, еженедельный обзор последних ссылок и руководств по React и React Native. Посетите Купить кофе , чтобы найти способы поддержать React Weekly, или..
(Почти) полнофункциональная реализация Gumbel MuZero в Джулии.
TLDR; Gumbel Muzero — это современный алгоритм обучения с подкреплением. Он достиг сверхчеловеческой производительности во многих настольных играх и даже, что более впечатляюще, в Atari..
Передача нейронного стиля в браузерах с использованием Angular и WebDNN
В последние годы глубокое обучение привлекло большое внимание из-за его безупречной производительности при обучении на обширных данных и высокой точности при выводе. Развертывание этих алгоритмов..
Шифр Цезаря в C
Шифр Цезаря  — один из самых простых и широко известных методов шифрования. Он включает в себя сдвиг каждой буквы в сообщении на определенное количество позиций в алфавите. В этой статье мы..
Исследовательский анализ данных (EDA)
Что такое ЭДА? Анализ данных, который ищет закономерности в данных, известен как исследовательский анализ данных. Это похоже на беглый просмотр данных, чтобы найти наиболее важные..
1x1 Convolution: демистификация
Чтобы пролить свет на концепцию операции свертки 1x1, которая представлена ​​в статье «Сеть в сети» Лин и др. и Google Inception Некоторое время назад я прочитал статью «Сеть в сети» (NiN),..
Лучшие расширения VS Code в 2022 году
Код ВС Лучшие расширения VS Code в 2022 году Список самых полезных расширений VS Code, которые вы можете использовать как разработчик в 2022 году Расширения находятся на рынке VS Code,..