![](/img/trans.png)
[英]Angular: Implementing ng-click in directive with DOM manipulation?
[英]ng-click to replace DOM element with angular directive
所以我想知道是否可以在跨度上使用ng-click語句,以便在單擊時將其替換為帶有指令(帶有模板,綁定等)的跨度內容?
例
<div class="col-xs-12">
<span ng-click="edit"> {{ user.name }} - {{ user.lastWin }} </span>
<button ng-click="removeUser(user.name)" class="btn btn-danger pull-right margin-right-10">Remove User</button>
</div>
那么編輯將是這樣的:
<form name="editUser">
<input type="text" name="name" ng-model="name" placeholder="Name"/>
<input type="text" ng-model="lastWin" placeholder="Last Win"/>
</form>
<button ng-click="editUser($index, { name: name, lastWin: lastWin })" class="btn">Save</button>
我必須在控制器上做什么才能使其正確交換所有內容?
我會使用ng-if
並且無需額外的javascript就可以完成整個操作
像這樣的東西:
<div class="col-xs-12" ng-if="!edit">
<span ng-click="edit = true"> {{ user.name }} - {{ user.lastWin }} </span>
<button ng-click="removeUser(user.name)" class="btn btn-danger pull-right margin-right-10">Remove User</button>
</div>
<div ng-if="edit">
<form name="editUser">
<input type="text" name="name" ng-model="name" placeholder="Name"/>
<input type="text" ng-model="lastWin" placeholder="Last Win"/>
</form>
<button ng-click="editUser($index, { name: name, lastWin: lastWin })" class="btn">Save</button>
</div>
考慮ng-if邏輯很好。 如果要擺脫ng-if,請在html中聲明兩個模板
<script type='text/ng-template' id='view'>
<!--Read only content here-->
<script>
<script type='text/ng-template' id='edit'>
<!--Form content here-->
<script>
然后使用ng-include
<div ng-include='template'></div>
在控制器中,您可以根據ng-click
當前狀態設置activeTemplate
if(edit) {
$scope.template='edit';
}
else {
$scope.template='view';
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.