kéo và thả (jqyoui-droppable) không hoạt động trong AngularJS

Question

Tôi muốn tạo một chuỗi chấm chấm để lấp đầy các khoảng trống với từ thích hợp (có thể kéo) để hoàn thành câu.

chuỗi như:

The ______ brown ______ jumps over the ______ dog. 

từ như: nhanh, fox, lười biếng

nhưng khi tôi kết chuỗi với ng-bind-html các jqyoui-droppable không hoạt động trong chuỗi trở lại. Không thể thả nút (phím có thể kéo) trong chuỗi khoảng cách.

$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>

đây là liên kết plnkr: demo

Tôi đã sử dụng jqyoui-droppable plugin này cho kéo và thả với jQueryUI.

Answer 1

Thực ra, tôi đã phải biên dịch lại chuỗi trả lại (dưới dạng HTML), vì vậy mà tôi đã viết một chỉ thị như như dưới đây:

bind-unsafe-html="unsafeString" 

đâu unsafeString là chuỗi trở lại của tôi.

chỉ Custom (bind-unsafe-html) như thế này:

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); 
      } 
     ); 
    }; 
}]); 

Tôi có một số câu trả lời trong #stackoverflow liên quan đến chuỗi (html) biên soạn, mà ấy đang giúp tôi để tìm hiểu giải pháp này.