Angular programatically binding ng-model

我有一個內聯標籤，點擊時將被替換爲輸入框來編輯內容。Angular programatically binding ng-model

<div ng-app> 
    <div ng-controller="TempController"> 
     <label ng-model="Data" class="editable-lbl">{{ Data }}</label> 
     <br /><br /> 
     <button ng-click="Save()">Save</button> 
    </div> 
</div>

問題是編輯後，它不會更新範圍內的變量。

function TempController($scope) 
{ 
    $scope.Data = 'Hi! Im enteng, Click me to edit'; 

    $scope.Save = function() 
    { 
     alert($scope.Data); 
    } 
} 

$(document).on("click", "label.editable-lbl", function() { 
    var txt = $(".editable-lbl").text(); 
    $(".editable-lbl").replaceWith("<input ng-model='Data' class='editable-lbl-input' />"); 
    $(".editable-lbl-input").val(txt); 
}); 

$(document).on("blur", "input.editable-lbl-input", function() { 
    var txt = $(this).val(); 
    $(this).replaceWith("<label class='editable-lbl'></label>"); 
    $(".editable-lbl").text(txt); 
});

檢查這個搗鼓活生生的例子Fiddle

我試圖綁定NG-模型

$(".editable-lbl").replaceWith("<input ng-model='Data' class='editable-lbl-input' />");

，但仍當我點擊保存按鈕，相同的值會提示。

請任何幫助。

來源

2014-09-26 Vincent Dagpin

您至少有兩個問題：

月1日關閉，當您嘗試添加任何元素，你的情況，例如：<input ng-model='Data' class='editable-lbl-input' />你需要compile它首先以告知使用$compile以Angular將這些內容置於摘要循環之下。
任何DOM操作/更新只寫入指令！否則，你剎車角的概念

你可以找到這個例子幫助：Fiddle

來源

2014-09-26 08:06:34

嗨，我嘗試過了，還是數據沒有更新.. HTTP：//的jsfiddle。淨/ vksh2wfv/5 /你介意檢查樣品請 – 2014-09-26 08:45:18

我甚至試過這一個，但仍然沒有運氣http://jsfiddle.net/vksh2wfv/6/ – 2014-09-26 08:52:27

oopps ..我的範圍：真的必須是假的..它現在正在工作..謝謝 – 2014-09-26 08:59:58

Angular programatically binding ng-model

回答

相關問題