1

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（sigh），就像小提琴中描述的那样。

我希望能够对一些动态添加的代码进行角度化，例如将 ng-click 指令添加到附加到“mycontent”div 的新按钮，请参见上面的评论。以角度友好的方式做到这一点的最佳方法是什么？我尝试使用 $compile ，但很快就变得很笨拙。

谢谢！

4

2 回答 2

1

这个小提琴展示了实现你正在尝试的许多方法之一。现在，我并不是说这对您的情况是正确的。但是，如果没有更多信息，很难确切知道您要达到的目标。

通常有一些方法可以使用 Angular 实现“动态”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>
于 2013-08-18T21:32:40.090 回答
0

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

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

于 2013-08-18T20:00:26.457 回答