Angular 指令未扫描 Javascript createElement

Question

我在脚本标签中创建了一个新的 DOM 元素

$( "#droppable_home" ).droppable({
 ....
 drop:
  //Create the new widget element. This renders in my page in Chrome's inspect view.
  var obj = document.createElement('widget');
  obj.id = "draggable_button";
  obj.style.cssText = 'position: absolute;left: 35%;top: 50%;';
  $("#droppable_home").parent().append(obj);
 ..........
});

我扫描“小部件”元素的 Angular Directive(指令)如下

.directive('widget', function($compile) {
 var show = function(scope, element, attrs) {
 var render = function() {  
  alert('Found '+element.attr('id'));   
  if(element.attr('id') === 'draggable_button'){
   alert('placing widget');
   element.html('<div id="widget_button" class="button button-positive" unbindable><span ng-bind="widgetname"></span></div>');
   $compile(element.contents())(scope);
  }
 };

scope.$watch('drag', function(newValue, oldValue) {
   alert('drag changed');
   if(newValue > 0) render();
});

};

return {
  restrict : 'E',
  link : show
 };
})

问题——上面使用 jQuery 创建的元素永远不会被 Angular 指令识别。
很高兴知道缺少什么。

Answer 1

不要使用 document.createElement，而是尝试以下方法: - element.id 是放置“ng-app”的元素的 id

var el = angular.element( document.getElementById("element.id") );

var scope = el.scope();
var injector = el.injector();

var $compile = injector.get("$compile");

var mynewel = $compile("<div widget></div>")(scope)