拖放(jqyoui-droppable)在AngularJS中不起作用

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链接: demo

我已经使用这个jqyoui-droppable插件来拖放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）编译相关的答案，这帮助我找到了这个解决方案。