Funkcja przeciągnij i upuść (jqyoui-droppable) nie działa w AngularJS

Question

Chcę utworzyć przerywany ciąg znaków, aby wypełnić luki odpowiednim (przeciągalnym) słowem, aby ukończyć zdanie.

ciąg jak:

The ______ brown ______ jumps over the ______ dog. 

słów takich jak: szybkie, lisa, leniwe

ale kiedy wiążę ciąg z ng-bind-htmljqyoui-droppable nie działa w ciągu powrotnym. Nie można upuścić przycisku (klucz do przeciągnięcia) w ciągu przerw.

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

tu jest link plnkr: demo

Użyłem tej jqyoui-droppable plugin dla przeciągnij i upuść z jQueryUI.

Answer 1

Właściwie mam przekompilować zwrócony ciąg (jako HTML), tak, że pisałem dyrektywę jak jak poniżej:

bind-unsafe-html="unsafeString" 

Gdzie unsafeString jest mój zwrócony ciąg.

dyrektywa zamówienie (bind-unsafe-html) tak:

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

Dostałem kilka odpowiedzi w #stackoverflow związanych strings (HTML) kompilacji, które są pomógł mi znaleźć to rozwiązanie.