Question

我是Angular的新手并且可能尝试以不正确的方式使用它，但是...... 我有这个代码 - 输入以输入URL并链接到该URL。

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

Cool，href属性现在与输入同步。现在我想克隆这个div，将url0替换为url1。但是如何在新div上进行绑定工作？

Answer 1

不要考虑DOM操作。 DOM操纵是邪恶的。 Angular旨在尽可能地避免DOM操作。

根据模型中的对象和数组以及显示此模型的模板进行思考。

所以，例如：

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

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

在模板中：

<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

不建议使用Angular操作DOM。我就是这样做的：

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

在动态HTML上应用Angular绑定

2 个答案: