0

我有一个指令contentEditable，它也引用html5 attr ::docs::。

<p  contentEditable="{{edit}}" ng-model="pages.title">default</p>

在指令的 dblclick 上，我希望 contentEditable 的值切换到true；在模糊切换到false..

但是，我一直在尝试，双击拒绝正常工作。不确定如何使它按照我想要的方式运行。

查看 JSfiddle

var app = angular.module('morningharwoodApp');
app.directive('contenteditable', function() {
  return {
  require: 'ngModel',
  scope:  {
    edit: '@'
  },
  controller: function($scope) {
    $scope.edit = false;
    console.log($scope.edit);
  },
  link: function(scope, elm, attrs, ctrl) {
    // view -> model
    elm.bind('blur', function() {
        scope.$digest(function() {
            ctrl.$setViewValue(elm.html());
        });
    });

    // model -> view
    ctrl.render = function(value) {
        elm.html(value);
    };

    // load init value from DOM
    ctrl.$setViewValue(elm.html());



    elm.bind('dblclick', function(event) {
        scope.edit = !scope.edit;
        console.log(scope.edit);


       console.log('keydown ' + event.which);
       var esc = event.which === 27,
           enter = event.which === 13,
           el = event.target;

       if (esc || enter) {
               // console.log('esc');
               ctrl.$setViewValue(elm.html());
               scope.editable = false;
               el.blur();
               event.preventDefault();                        
       }

      });

    }
  };
});
4

2 回答 2

4

您错误地使用了范围绑定，隔离范围绑定用于绑定指令范围和父控制器范围之间的值，而不是属性本身。

您的原始代码的结果是标签将始终存在并且没有这样的值：

<div contenteditable ng-model="fName"> ..

这就是为什么元素总是可编辑的。

如果要更改属性的值，可以使用attrs.$set()代替。启用后contenteditable，您必须手动聚焦元素，否则需要再次单击才能进入编辑模式。

elm.bind('dblclick', function () {
  if (!attrs.contenteditable) {
    attrs.$set('contenteditable', true);
    elm[0].focus();
  }
});

然后重新设置模糊属性：

elm.bind('blur', function () {
  attrs.$set('contenteditable', false);

  scope.$apply(function () {
    ctrl.$setViewValue(elm.html());
  });
});

你的ENTER/ESC关键逻辑也应该在keyup事件中

elm.bind('keyup', function (event) {
  var esc = event.which === 27,
    enter = event.which === 13;

  if (esc || enter) {
    event.preventDefault();
    elm[0].blur();
  }
});

请参阅下面编辑的 jsfiddle 以获取完整的工作示例。

JSFiddle：http: //jsfiddle.net/hMrTA/1/

于 2014-07-22T09:31:05.973 回答
0

即使单击一下也可以编辑输入的事实是因为您使用焦点元选择器来突出显示它。您可以通过单击（也包括双击）并在键盘上点击 Tab 直到它被选中来实现焦点状态，我相信这比您想要的要多。

我建议重新考虑你的指令。一种想法是有 2 个字段：一个标签（显示当前值）和一个输入字段（允许编辑），并且根据您使用的标志仅显示一个。在标签上绑定 dblclick 事件以更改标志（并显示输入）并在输入上绑定 blur 事件以将其切换回来。

于 2014-07-22T08:57:17.303 回答