ड्रैग और ड्रॉप (jqyoui-droppable) AngularJS

Question

में काम नहीं कर रहा है मैं वाक्य को पूरा करने के लिए उपयुक्त (ड्रैग-सक्षम) शब्द के साथ अंतराल को भरने के लिए एक बिंदीदार स्ट्रिंग बनाना चाहता हूं। जैसे

स्ट्रिंग: त्वरित, लोमड़ी, आलसी

लेकिन जब मैं ng-bind-html के साथ स्ट्रिंग बाँध jqyoui-droppable वापसी स्ट्रिंग में काम नहीं कर रहा: की तरह

The ______ brown ______ jumps over the ______ dog. 

शब्द। अंतराल स्ट्रिंग में बटन (ड्रैग-सक्षम कुंजी) ड्रॉप नहीं कर सका।

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

    }; 

एचटीएमएल: demo

मैं खींचें के लिए इस jqyoui-droppable plugin का इस्तेमाल किया और jQueryUI के साथ छोड़ दिया है: <div ng-bind-html="createDottedString()"></div>

यहाँ

plnkr कड़ी है।

Answer 1

वास्तव में, मैं (एचटीएमएल के रूप में) लौट आए स्ट्रिंग पुन: संयोजित करने के लिए, ताकि मैं नीचे की तरह के रूप में एक निर्देश में लिखा है है:

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 में कुछ जवाब मिल गया।