Wie können Angular-aktivierte Elemente zu DOM hinzugefügt werden?

Question

Ich möchte einige Angular-aktivierte DOM-Elemente programmgesteuert hinzufügen. Eigentlich muss ich wahrscheinlich benutzerdefinierte Komponenten hinzufügen. Wie kann ich es tun?

Hier ist eine triviale Geige um das Problem zu demonstrieren: 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'; 
}); 

Nur für den Fall, ich erwarte, dass es ein div hinzufügen zeigt „Test Nachricht "für jeden Klick - nicht {{test}}.

Warum brauche ich es? Nun, ich hätte gerne ein paar sortierbare Spalten (in jQuery sortierbar) mit Portlets. Ich stelle mir vor, jedes Portlet könnte eine Komponente sein.

Gehe ich auf den falschen Hügel? Was ist der Winkelweg, um das zu lösen?

EDIT: Ich hoffte, dieses simple Beispiel würde nicht auf diese Weise enden, aber wie auch immer. Das ultimative Ziel ist nicht, ein div für jedes Element in einem Array anzuzeigen.

Was ich wirklich will, ist ein komplexerer Controller. Ich brauche einen Portlet-Container mit etwas interessantem Verhalten. Es muss möglicherweise entschieden werden, jedes Portlet in einer anderen Spalte zu platzieren. Es bietet möglicherweise eine Änderung des Layouts und eine angemessene Möglichkeit, Portlets in einem solchen Fall neu zu organisieren. Und so weiter.

Answer 1

Wenn Sie mehrere Tests wünschen, würde ich vorschlagen, es so einzurichten.

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

Dies erstellt dynamisch Divs basierend auf Ihrem Testobjekt.

Answer 2

Obwohl ich nicht ganz sicher bin, was das gewünschte Ergebnis ist, möchten Sie sicher sein, dass alle DOM-Manipulation innerhalb einer Direktive und nicht in Ihrem Controller erfolgt.

Dieses JSfiddle-Beispiel sollte Sie in die richtige Richtung bringen.

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

Wie @Christopher Marshall wies darauf hin, der einfachste Weg, dies zu tun, ein sich wiederholendes Element verwendet, und ein neues Element in Bereich auf dem Tastendruck drückt.

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