插入指令动态和编译

Question

我有一种情况，当用户点击一个链接，我想自定义元素插入到DOM例如

//user clicks  
    $scope.click = function() { 
      var el = $compile("<my-directive></my-directive>")($scope); 
      $element.after(el); 
    }; 

的我的指令....指令具有HTML模板..比方说（template1.html）

<p>My Template for my-directive</p> 
{{SomeProperty}} 

我的指导性的定义如下

module.directive('myDirective', ['$compile', function ($compile) { 
    return { 
     restrict: 'E', 
     replace: true, 
     templateUrl: '/template1.html', 
     scope: true 
    }; 
}]); 

如果我们假设myDirective中的范围在运行此代码后实际上具有SomeProperty的值，那么确实将my-directive插入到DOM中并由模板替换 - template1.html，但{{SomeProperty}}尚未替换为所有！我该怎么做呢？？

更多细节

Answer 1

你在你的Plunkr做$compile("<my-directive></my-directive>")($scope.$parent);。删除.$parent

Chenge模板：

<p>My Template for my-directive</p> 
{{d.SomeProperty}} 

像你一样d in data。

它的作品:)

Answer 2

我不知道你是否有任何其他错误见Plunkr，但我发现，消除replace:true使得它为我工作。

我不确定到底发生了什么，但不知何故，您将指令添加到dom +立即替换它的交互导致它不起作用。

我注意到的另一件事是，通过使用$element.after(el);您最后得到的是一个超出控制器范围的元素。它不在控制器的范围内。不幸的是，我只在我的朋友看到​​这个，所以不知道这是否也会影响到你。

Plunkr here