Question

http://jsfiddle.net/RW46a/2/

<div ng-app='myApp' ng-controller='MyController'>
    <button id="addbtn">add dynamic content</button>
    <div id="mycontent">
        <button ng-click='click()'>click here</button><br/>
        <!-- another button will be added here but its ng-click won't work -->
    </div>
</div>

我的应用程序使用外部依赖项，jQuery将HTML代码直接添加到DOM（叹息），就像小提琴中描述的那样。

我希望能够动态地添加一些动态添加的代码，例如将ng-click指令添加到附加到“mycontent”div的新按钮，请参阅上面的注释。以角度友好的方式做到这一点的最佳方法是什么？我试图利用$ compile但很快就变得很糟糕。

谢谢！

Answer 1

This fiddle显示了实现目标的众多方法之一。现在，我不是说这对你的情况是正确的。但是，如果没有更多信息，很难确切地知道您要实现的目标。

通常使用角度来实现“动态”DOM操作的方法与使用$compile无关。我希望我给你一个想法。

基本上，您可以将ng-show用于第一个元素，然后ng-repeat用于其余元素：

<强> JS：

var app = angular.module('myApp', []);

function MyController($scope) {
  $scope.click = function() {
    alert('Clicked');
  };

    $scope.add = function() {
       $scope.contentCollection.push(1);
    }

  $scope.contentCollection = [];
}

<强> HTML：

<div ng-app='myApp' ng-controller='MyController'>
    <button ng-click="add()" id="addbtn">add dynamic content</button>
    <div ng-show="contentCollection.length > 0" ng-repeat="content in contentCollection">
        <button ng-click='click()'>click here</button><br/>
    </div>
</div>

Answer 2

我认为您希望使用ng-include将代码片段添加到DOM中。这将在加载html之前编译角度元素，因此您可以使用ng-click等指令。

请注意，这将创建一个新的子范围，因此您无法直接访问控制器的范围。

动态重新编译角度指令

2 个答案: