Come aggiungere elementi abilitati per Angular al DOM?

Question

Vorrei aggiungere alcuni elementi DOM abilitati per Angular a livello di codice. In realtà, probabilmente avrò bisogno di aggiungere componenti personalizzati. Come posso farlo?

Ecco un violino banale per dimostrare il problema: http://jsfiddle.net/ZJSz4/2/

HTML:

<div ng-app="main"> 
    <div ng-controller="MyCtrl"> 
     <button ng-click="add()" >Add</button> 
     <div id="container"> 
      <div>{{test}}</div> 
     </div> 
    </div> 
</div> 

JS:

angular.module("main", []).controller("MyCtrl", function($scope) { 
    $scope.add = function() { 
     $("#container").append("<div>{{test}}</div>"); 
    }; 

    $scope.test = 'Test Message'; 
}); 

Solo nel caso, mi aspetto di aggiungere un div che mostra "Test Messaggio "per ogni clic - non {{test}}.

Perché ne ho bisogno? Bene, vorrei avere alcune colonne ordinabili (in jQuery senso ordinabile) con portlet. Immagino che ogni portlet potrebbe essere un componente.

Sono salito sulla collina sbagliata? Qual è il modo angolare per risolvere questo?

EDIT: speravo che questo esempio semplicistico non finisse in quel modo, ma comunque. L'obiettivo finale non è quello di visualizzare un div per ogni elemento in un array.

Quello che voglio veramente è un controller più complesso. Ho bisogno di un portlet con un comportamento interessante. Potrebbe essere necessario decidere di posizionare ciascun portlet in una colonna diversa. Può offrire la modifica del layout e un modo decente di riorganizzare i portlet in tale evento. E così via.

Answer 1

Se si desidera eseguire più test, suggerirei di configurarlo in questo modo.

<div ng-app="main"> 
    <div ng-controller="MyCtrl"> 
     <button ng-click="add()" >Add</button> 
     <div id="container"> 
      <div ng-repeat="test in tests">{{test.name}}</div> 
     </div> 
    </div> 
</div> 


$scope.tests = []; // define this as an array 

$scope.add = function() { 
    var newTest = {name: 'Test Message'}; 

    $scope.tests.push(newTest); 
}; 

Questo creerà dinamicamente div basano sui test oggetto.

Answer 2

Anche se non sono del tutto sicuro di quale sia l'esito desiderato, si vuole essere sicuri che tutta la manipolazione del DOM avvenga all'interno di una direttiva e non all'interno del controller.

Questo esempio di JSfiddle dovrebbe farti andare nella giusta direzione.

http://jsfiddle.net/ZJSz4/5/

<div ng-app="main"> 
<div ng-controller="MyCtrl"> 
<div id="container"> 
    <button ng-click="add()" >Add</button> 
    <ng-portlet></ng-portlet> 
</div> 
</div> 

angular.module("main", []).controller("MyCtrl", function($scope) { 
    $scope.test = 'Test Message'; 
}).directive("ngPortlet", function ($compile) { 
return { 
    template: '<div>{{test}}</div> ', 
    restrict: 'E', 
    link: function (scope, elm) { 
     scope.add = function(){ 
      console.log(elm); 
      elm.after($compile('<ng-portlet></ng-portlet>')(scope)); 
     } 
    } 
}; 
}); 

Answer 3

Come @Christopher Marshall indicate, il modo più semplice per farlo è usare un elemento ripetuto e spingendo una nuova voce nella portata sul pulsante.

[HTML]

<div ng-app="main"> 
    <div ng-controller="MyCtrl"> 
     <button ng-click="add()" >Add</button> 
     <div id="container"> 
      <div ng-repeat="test in tests">{{test}}</div> 
     </div> 
    </div> 
</div> 

[JS]

angular.module("main", []).controller("MyCtrl", function($scope) { 
    $scope.add = function() { 
     $scope.tests.push('New Message'); 
    }; 

    $scope.tests = ["Test Message","Test Message 2"]; 
});