Angularjs 角度X-可编辑和自定义指令

看看这个例子：（）

html部分：

<div ng-app="AppModul" ng-controller="AppController">
<p>Name : <input type="text" ng-model="name"></p>
<div counter-directive max-length="100" ng-model="name"></div>
<a href="#" editable-text="name">{{ name || 'click on me' }}</a>
</div>

如果您输入普通文本输入，通过一个指令，您可以实时查看您输入的字母数。现在单击可编辑链接并键入一些内容。什么都没有发生，指令也不起作用。实际上，angular xeditable不会实时更新ng模型，除非我单击save按钮

---

如何使我的行为与Angular xeditable中的文本输入标记相同？

您的示例按预期工作。是否要自定义x-editable的默认行为？如果单击editable link tag并在文本输入中键入内容，则它的工作方式与普通输入标记不同，并且不会显示用户键入的字母数。。这是

x-editable

的默认行为。您的示例按预期工作。是否要自定义x-editable的默认行为？如果单击editable link tag并在文本输入中键入内容，则它的工作方式与普通输入标记不同，并且不会显示用户键入的字母数。。这是

x-editable

的默认行为。

var app = angular.module('AppModul', ["xeditable"]);
app.controller('AppController', function($scope) {

});

app.directive('counterDirective', function() {

  return {

    restrict: 'A',
    require: 'ngModel',
    scope: {
      maxLength: '=',
      ngModel: '&'
    },
    link: function(scope, element, attrs) {

      console.log(scope.maxLength);

      scope.$watch(scope.ngModel, function(value) {

        if (value) {

          var newValue = value.length;
          console.log(value);
          element[0].innerText = newValue;
        }
      });

    }
  }

});