Angular programatically binding ng-model

Question

我有一个内联标签，点击时将被替换为输入框来编辑内容。

<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' />"); 

，但仍当我点击保存按钮，相同的值会提示。

请任何帮助。

Answer 1

您至少有两个问题：

• 月1日关闭，当您尝试添加任何元素，你的情况，例如：<input ng-model='Data' class='editable-lbl-input' />你需要compile它首先以告知使用$compile以Angular将这些内容置于摘要循环之下。

• 任何DOM操作/更新只写入指令！否则，你刹车角的概念

---

你可以找到这个例子帮助：Fiddle