Question

看一下这个例子：（On jsfiddle）

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>

Js part：

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;
        }
      });

    }
  }

});

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

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

Angular X-editable和custom指令

0 个答案: