7

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

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

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

4

3 回答 3

12

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

scope: { bar: "=ngModel" }

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

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

element.parent().append(counterElement);

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

于 2012-12-03T19:26:18.183 回答
5

你真的需要自定义指令吗？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();
}

让 angular 尽可能多地处理 dom。

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

于 2012-12-03T18:58:02.387 回答
0

我不完全确定，但我认为你想要的是一个过滤器，看看这个 url，也许这是重新考虑你的问题的好方法。

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

于 2012-12-03T17:57:39.217 回答