Wenden Sie Winkelbindung auf dynamisches HTML an

Question

Ich bin zu Angular neu und versuche vielleicht, es in der falschen Weise zu benutzen, aber .. Ich habe diesen Code - Eingang, um URL und Verbindung einzugeben, um zu dieser URL zu gehen.

<div> 
    <input type="text" ng-model="url0"> 
    <a href="{{url0}}">goto</label> 
</div> 

Cool, href Attribut ist jetzt mit Eingabe synchronisiert. Jetzt möchte ich dieses div klonen und url0 zu url1 ersetzen. Aber wie macht man eine bindende Arbeit am neuen div?

Answer 1

Hören Sie auf, in Bezug auf DOM Manipulation zu denken. DOM Manipulation ist böse. Angular wurde entwickelt, um DOM-Manipulationen so weit wie möglich zu vermeiden.

Denken Sie in Bezug auf Objekte und Arrays im Modell und eine Vorlage, die dieses Modell anzeigt.

So zum Beispiel:

$scope.items = [ 
    { 
     url: 'foo'; 
    } 
]; 

$scope.addItem = function() { 
    $scope.items.push({ 
     url: ''; 
    }); 
}; 

Und in der Vorlage:

<div ng-repeat="item in items"> 
    <input type="text" ng-model="item.url"> 
    <a ng-href="{{item.url}}">goto</a> 
</div> 
<button ng-click="addItem()">Add an item</button> 

Answer 2

Manipulieren der DOM Angular wird nicht empfohlen. Dies ist, wie ich es tun würde:

HTML:

<input id="url-input" type="text"/> 
<button id="go-button">GO</button> 

JS:

var input, 
    go_button, 
    url; 

input = document.getElementById("url-input"); 
go_button = document.getElementById("go-button"); 

go_button.addEventListener("click", function(){ 
    url = input.value; 
    window.location.href = url; 
});