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

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

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

Answer 1

你至少有两个问题：

当您尝试添加任何元素时，首先关闭，例如：<input ng-model='Data' class='editable-lbl-input' />您首先需要 compile 使用{{1}为了告诉Angular将这些内容放在摘要周期中。
任何DOM操作/更新只能在Directives中编写！否则你会制止Angular概念

您可以在此示例中找到帮助： Fiddle

Answer 2

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

角度编程绑定ng模型

2 个答案: