Question

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

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

当我输入textarea时，模型没有像我需要的那样更新。我做错了什么？

Answer 1

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

scope: { bar: "=ngModel" }

否则你正在创建一个孤立的范围（见http://docs.angularjs.org/guide/directive）。

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

element.parent().append(counterElement);

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

Answer 2

你真的需要一个自定义指令吗？ AngularJS附带ngMaxlength指令，结合ngChange可能会对您有帮助。

例如，如果您有以下HTML

<body ng-controller="foo">
    <form name="myForm">
        <textarea name = "mytextarea"
                  ng-maxlength="20" 
                  ng-change="change()"
                  ng-model="bar"></textarea>
         <span class="error" ng-show="myForm.mytextarea.$error.maxlength">
             Too long!
         </span>
        <span> {{left}} </span>
        <h1>{{bar}}</h1>
    </form>                 
</body>

然后你只需将它放入你的控制器

function foo($scope) {  
    $scope.change = function(){
        if($scope.bar){
           $scope.left = 20 - $scope.bar.length;            
        }else{
           $scope.left = "";
        }      
    };
    $scope.bar = 'Hello';
    $scope.change();
}

让角度尽可能多地处理dom。

这是更新的jsfiddle：http://jsfiddle.net/jaimem/ksb3j/7/

Answer 3

我不完全确定，但我认为您想要的是过滤器，请查看此网址，也许这是重新考虑您的问题的好方法。

http://docs.angularjs.org/api/ng.filter:limitTo

AngularJs指令内的数据绑定

3 个答案: