拖放（jqyoui-droppable）在 AngularJS 中不起作用

Posted 2023-05-08

【中文标题】拖放（jqyoui-droppable）在 AngularJS 中不起作用

【英文标题】：drag & drop (jqyoui-droppable) is not working in AngularJS

【发布时间】：2017-03-30 16:02:35

【问题描述】：

我想制作一个虚线，用适当的（可拖动的）单词填补空白以完成句子。

类似的字符串：

The ______ brown ______ jumps over the ______ dog.

类似的词：quick、fox、lazy

但是当我将字符串与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 链接： demo

我已经使用这个jqyoui-droppable plugin 与 jqueryUI 进行拖放。

【参考方案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);
            
        );
    ;
]);

我在#*** 中得到了一些与字符串 (html) 编译相关的答案，这有助于我找到这个解决方案。