Question

如果我在页面上打字

<liberty-directive></liberty-directive>

工作正常。

但是，我有数据库表和指令名列表。

所以

<table>
    <tr ng-repeat="lib in vm.liberty">
        <td>{{lib.Tag}}</td>
    </tr>
</table>

所以这是带有指令标记

的对象

{{lib.Tag}}  = <td class="ng-binding">&lt;liberty-directive&gt;&lt;/liberty-directive&gt;</td>

查看源代码“看起来很好”，但复制并粘贴到它正在改变，如何防止这种情况？

Answer 1

要使其正常工作，您必须在ng-repeat的每次迭代中编译您的html（使用$compile）。为此，您可以使用简单的自定义指令：（PLUNKER DEMO）

.directive('compileHtml', ['$compile', function($compile) {
  return function(scope, element, attrs) {
    element.html(attrs.compileHtml);
    $compile(element.contents())(scope);
  };
}]);

然后在您的 HTML 中使用它：

<tr ng-repeat="d in vm.data">
  <td compile-html="{{d.htmlContent}}"></td>
</tr>

控制器：

function myCtrl() {
    var vm = this;

    vm.data = [
        { "htmlContent": "<my-custom-directive></my-custom-directive>" }, 
        { "htmlContent": "<div>Custom: <span my-attr-directive></span></div>" },
        //... more items
    ];
}

如果您想了更多示例，请查看此post。

动态添加AngularJS指令到页面以显示和呈现指令不起作用

1 个答案: