拖放（jqyoui-droppable）在AngularJS中不起作用

Question

我想用一個虛線字符串來填充與適當（可拖動）單詞完成句子的空白。

字符串，如：

The ______ brown ______ jumps over the ______ dog. 

的話，如：快速，狐狸，懶

，但是當我在字符串綁定ng-bind-html的jqyoui-droppable沒有在返回字符串工作。無法放下間隙字符串中的按鈕（可拖動鍵）。

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

這裏是plnkr鏈接： demo

我用這個jqyoui-droppable plugin的阻力，並與jQueryUI的下降。

Answer 1

其實，我已經重新編譯返回的字符串（如HTML），讓我寫了一個指令，因爲象下面這樣：

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一些答案相關的字符串（HTML）編寫，這是真實幫我找出這個解決方案。