Drag & Drop (jqyoui-droppable) funktioniert nicht in AngularJS

Question

Ich möchte eine gepunktete Zeichenfolge machen, um die Lücken mit dem entsprechenden (Drag-fähigen) Wort zu füllen, um den Satz zu vervollständigen.

String wie:

The ______ brown ______ jumps over the ______ dog. 

Wörter wie: schnell, Fuchs, faul

aber wenn ich die Zeichenfolge mit ng-bind-html die jqyoui-droppable binden funktioniert nicht in der Rückgabe-String. Die Schaltfläche (ziehbarer Schlüssel) konnte nicht in die Lückenzeichenfolge eingefügt werden.

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

hier ist die plnkr Link: demo

Ich habe diese jqyoui-droppable plugin für Drag verwendet und mit jQueryUI fallen.

Answer 1

Eigentlich habe ich die zurückgegebene Zeichenfolge (als HTML) neu zu kompilieren, so dass ich eine Richtlinie so wie unten geschrieben haben:

bind-unsafe-html="unsafeString" 

Wo unsafeString meine zurückgegebene Zeichenfolge ist.

Benutzerdefinierte Richtlinie (bind-unsafe-html) wie folgt aus:

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

Ich habe ein paar Antworten in #stackoverflow in Strings (html) Kompilation zusammen, die mir geholfen hat, diese Lösung zu erfahren.