Angular 以编程方式绑定 ng-model答案

【问题标题】：Angular programmatically binding ng-modelAngular 以编程方式绑定 ng-model
【发布时间】：2014-09-26 07:56:01
【问题描述】：

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

<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-model

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

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

【问题讨论】：

标签： jquery angularjs angular-ngmodel

【解决方案1】：

你至少有两个问题：

当您尝试添加任何元素时，例如：<input ng-model='Data' class='editable-lbl-input' /> 您需要首先使用$compile compile 它以告知Angular 将此内容置于摘要循环中。
任何 DOM 操作/更新都只能写入指令！否则你会破坏 Angular 的概念

您会发现此示例很有帮助：Fiddle

【讨论】：

嗨，我试过了，但数据仍然没有更新..jsfiddle.net/vksh2wfv/5你介意检查一下样本吗
哎呀..我的范围：真必须是假的..它现在正在工作..谢谢

【解决方案2】：

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

【讨论】：