AngularJs 指令内的数据绑定

我很难弄清楚如何确保在创建指令时维护双向数据绑定。这是我正在使用的东西和小提琴：

http://jsfiddle.net/dkrotts/ksb3j/6/

HTML:

<textarea my-maxlength="20" ng-model="bar"></textarea>
<h1>{{bar}}</h1>

指示：

myApp.directive('myMaxlength', ['$compile', function($compile) {
return {
    restrict: 'A',
    scope: {},
    link: function (scope, element, attrs, controller) {
        element = $(element);

        var counterElement = $compile(angular.element('<span>Characters remaining: {{charsRemaining}}</span>'))(scope);

        element.after(counterElement);

        scope.charsRemaining = parseInt(attrs.myMaxlength);

        scope.onEdit = function() {
            var maxLength = parseInt(attrs.myMaxlength),
                currentLength = parseInt(element.val().length);

            if (currentLength >= maxLength) {
                element.val(element.val().substr(0, maxLength));
                scope.charsRemaining = 0;
            } else {
                scope.charsRemaining = maxLength - currentLength;
            }

            scope.$apply(scope.charsRemaining);
        }

        element.keyup(scope.onEdit)
            .keydown(scope.onEdit)
            .focus(scope.onEdit)
            .live('input paste', scope.onEdit);
        element.on('ngChange', scope.onEdit);
    }
}
}]);

当我在文本区域中输入时，模型没有像我需要的那样更新。我究竟做错了什么？

那么，双向数据绑定不起作用有两个原因。 首先，您需要在本地范围属性和父范围属性之间创建双向绑定：

scope: { bar: "=ngModel" }

否则您将创建一个隔离的范围（请参阅http://docs.angularjs.org/guide/directive).

另一个原因是你必须用来自父级的附加指令替换后插入指令（因为你只是在 dom.ready 上引导角度）：

element.parent().append(counterElement);

更新jsfiddle：http://jsfiddle.net/andregoncalves/ksb3j/9/