javascript - Angular 自定义点击编辑 - 输入值到函数

Question

我在我的代码中有一个基本的单击以编辑跨度字段，它会提示一个输入框和几个按钮:

    <span ng-click="editField()" ng-if="edit === false">Your text to edit</span>

    <div ng-if="edit === true">
        <input type="text" ng-bind="data.field" value="Your text to edit" />
        <button type="submit" class="btn btn-primary" ng-click="update(data.field, 'somename')"><span class="glyphicon glyphicon-ok"></span></button>
        <button type="button" class="btn btn-default" ng-click="cancelEdit()"><span class="glyphicon glyphicon-remove"></span></button>
    </div>

当用户保存时，update 函数被调用。但是，我遇到的问题是如何将用户输入的任何文本发送到我的 Angular 逻辑，而不在 Controller 开始时设置对象中的文本值？

举个例子: http://jsfiddle.net/43GUa/1/

基本上它在控制台打印:undefined + somename

如何将 undefined 设置为输入字段中的文本？我无法使用 ng-model，因为我无法在我的 Controller 中声明我的对象数据(？)。

干杯

Answer 1

ng-bind 用值替换元素的文本，您想使用 ng-model 对控件的值进行双向绑定(bind)( fiddle ):

<input type="text" ng-model="data.field"/>

为什么你不想在开始时设置值？如果您希望该值来自 HTML，您应该编写一个指令。如果您在多个地方执行此操作，您可以编写一些内容来更新字段或调用函数:

<my-editable update="data.field">Your text to edit</my-editable>
<!-- or -->
<my-editable update="updateValue($value, 'somename')">Your text to edit</my-editable>

如果您真的不想这样做，您可以将 $event 传递给 editField() 并加载 data .field 的值为:

$scope.editField = function(event) {
    $scope.edit = true;
    $scope.data.field = event.target.innerText;
 };

 <span ng-click="editField($event)" ng-if="edit === false">Your text to edit</span>