повторно компилировать угловые директивы динамически

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 к новой кнопке, которая добавлена ​​в div «mycontent», см. комментарий выше. Каков наилучший способ сделать это с угловатым дружеским отношением? Я попытался использовать компиляцию $, но это быстро взломало.

Спасибо!

Answer 1

Я думаю, вы хотите использовать ng-include, чтобы добавить фрагмент кода в DOM. Это позволит скомпилировать угловые элементы перед загрузкой html, чтобы вы могли использовать директивы, такие как ng-click.

Обратите внимание, что это создаст новый дочерний объект, поэтому у вас не будет прямого доступа к области управления.

Answer 2

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>