Question

我想创建一个虚线字符串，用适当的（可拖动的）单词填充空白以完成句子。

字符串如：

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链接： OpenFire

我已经使用这个demo来拖放jqueryUI。

Answer 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）编译相关的一些答案，这有助于我找到这个解决方案。

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

1 个答案: