Question

我有一个用户点击链接的场景，我想在DOM中插入自定义元素，例如

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

my-directive ....指令有一个html模板..比如说（template1.html）

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

my-directive定义如下

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

如果我们假设myDirective中的范围在运行此代码后实际上具有SomeProperty的值，我确实将my-directive插入到DOM中并替换为模板 - template1.html但是{{SomeProperty}}没有一直被取代！我该怎么办？

有关详细信息，请参阅Plunkr

Answer 1

我不确定您是否有任何其他错误，但我发现删除replace:true使其对我有用。

我不确定这里到底发生了什么，但不知何故，您将指令添加到dom +立即替换它的交互会导致它无法正常工作。

我注意到的另一件事是，通过使用$element.after(el);，您最终得到的是一个在控制器范围外的元素。它不在控制器具有范围的div中。不幸的是，我只在MY plunkr中看到过这个，所以不知道这是否会影响你。

Plunkr here

Answer 2

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

将模板更改为：

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

正如您d in data。

它适用于：）

动态插入指令并进行编译

2 个答案: