角度编程绑定ng模型

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

您至少有两个问题：

• 首先，当你试图添加任何元素时，例如：<input ng-model='Data' class='editable-lbl-input' />，你需要先使用$compile编译，以便告诉Angular将这些内容置于摘要循环中。

• 仅限任何DOM操作/更新写入指令！否则你会刹车角度概念

---

您可以发现此示例很有用：Fiddle

Answer 2

尝试将事件侦听器放入控制器中，然后更新$scope.Data，而不是使用jquery函数。