Drag & drop (jqyoui-droppable) does not work in AngularJS

Question

I want to make a dotted line to fill in the blanks with the appropriate (draggable) word to complete the sentence.

string like:

The ______ brown ______ jumps over the ______ dog. 

words like: fast , fox , lazy

but when I bind a string using ng-bind-html , jqyoui-droppable does not work in the returned string. Failed to reset the button (draggable key) in the space bar.

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

here is the plnkr link: demo

I used this jqyoui-droppable plugin to drag and drop with jqueryUI.

Answer 1

In fact, I have to recompile the returned string (like HTML), so I wrote a directive as shown below:

 bind-unsafe-html="unsafeString" 

Where unsafeString is my returned string.

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

I got some #stackoverflow answers related to string compilation (html) that helped me find this solution.