Jak dodać elementy z obsługą Angular do DOM?

Question

Chciałbym programowo dodać niektóre elementy DOM z obsługą Angula. Właściwie to prawdopodobnie będę musiał dodać niestandardowe komponenty. Jak mogę to zrobić?

Oto trywialne skrzypce do wykazania problem: 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'; 
}); 

Tylko w przypadku, można oczekiwać, że dodać div pokazując „Test Wiadomość "za każde kliknięcie - nie {{test}}.

Dlaczego jest to potrzebne? Cóż, chciałbym mieć kilka sortowalnych kolumn (w sensie sortowalnym jQuery) z portletami. Wyobrażam sobie, że każdy portlet może być komponentem.

Czy wspinam się na niewłaściwym wzgórzu? Jaki jest kątowy sposób rozwiązania tego problemu?

EDIT: Miałem nadzieję, że ten uproszczony przykład nie zakończy się tak, ale tak czy inaczej. Ostatecznym celem nie jest wyświetlenie elementu div dla każdego elementu w tablicy.

To, czego naprawdę chcę, to bardziej złożony kontroler. Potrzebuję kontener portletu z pewnym interesującym zachowaniem. Może zaistnieć potrzeba decyzji o umieszczeniu każdego portletu w innej kolumnie. Może oferować zmianę układu i porządny sposób na reorganizację portletów w takim przypadku. I tak dalej.

Answer 1

Jeśli chcesz wykonać wiele testów, sugeruję takie ustawienie.

<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); 
}; 

Spowoduje to dynamiczne tworzenie elementów div na podstawie obiektu testów.

Answer 2

Chociaż nie jestem całkowicie pewien, jaki jest pożądany wynik, chcesz mieć pewność, że wszystkie manipulacje DOM są wykonywane w ramach dyrektywy, a nie wewnątrz kontrolera.

Ten przykład JSfiddle powinien skierować Cię w dobrym kierunku.

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

Jak @Christopher Marshall zauważył, najprostszym sposobem, aby to zrobić jest użycie powtarzający się element i pchanie nowy element do zakresu w przycisk nacisnąć.

[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"]; 
});