Javascript 在属性指令中创建禁用的绑定

我正在尝试创建一个非常简单的字符计数器指令，我可以在任何

textarea

或

input

上删除一个属性，并获得一种简单的方法，使

input/textarea

服从angulars

ng maxlength

并能够防止键入超过该点，并在

input/textarea

将有一个字符倒计时

我现在想弄清楚的是，一旦达到最大字符数，如何将

input/textarea

的禁用状态绑定为禁用

angular.module('bidrAdminApp')
  .directive('characterCounter', function ($compile) {
    return {
      restrict: 'A',
      scope: {
        characterCount: '=ngModel',
        maxLength: '=ngMaxlength'
      },
      link: function postLink(scope, element, attrs) {
        console.log(attrs);
        var el = '<i>{{maxLength - characterCount.length}}</i>';
        el = $compile(el)(scope);
        $(element).after(el);
      }
    };
  });

angular.module（'bidrAdminApp'））
.directive（'characterCounter'，函数（$compile）{
返回{
限制：“A”，
范围：{
characterCount:'=ngModel'，
maxLength:'=ngMaxlength'
},
链接：函数postLink（范围、元素、属性）{
控制台日志（attrs）；
var el='{{maxLength-characterCount.length}}'；
el=编译（el）（范围）；
$（元素）。在（el）之后；
}
};
});

到目前为止，模板非常简单

---

您需要在模型中添加一个观察者，然后在那里执行您的逻辑

angular.module（'myApp'，[]）
.directive（'characterCounter'，函数（$compile）{
返回{
限制：“A”，
范围：{
characterCount:'=ngModel'，
maxLength:'=ngMaxLength'
},
链接：函数postLink（范围、元素、属性）{
var el='{{maxLength-characterCount.length}}'；
el=编译（el）（范围）；
$（元素）。在（el）之后；
$（element.attr（'max'，scope.maxLength）；
/*
作用域.$watch（'characterCount'，函数（newVal，oldVal）{
如果（！newVal）返回；
if（newVal.length>=scope.maxLength）{
$（element.attr（'disabled'，'disabled'）；
}否则{
$（元素）.removeAttr（'disabled'）；
}
})*/
//如果不希望禁用属性：
作用域.$watch（'characterCount'，函数（newVal，oldVal）{
如果（！newVal）返回；
if（newVal.length>scope.maxLength）{
scope.characterCount=oldVal；
}
})
}
};
});

有输入




使用文本区域

我添加了一个新的
作用域。$watch
函数，它将监视
characterCount
值，并在值发生变化时运行函数。在这种情况下，它会将长度修剪为
maxLength
，这将用于在文本字段中键入和复制/粘贴。如果您在控制器中使用长度大于
maxLength
的值手动设置该值，该功能也会起作用

angular.module('bidrAdminApp')
  .directive('characterCounter', function ($compile) {
    return {
      restrict: 'A',
      scope: {
        characterCount: '=ngModel',
        maxLength: '=ngMaxlength'
      },
      link: function postLink(scope, element, attrs) {
        console.log(attrs);
        var el = '<i>{{maxLength - characterCount.length}}</i>';
        el = $compile(el)(scope);
        $(element).after(el);

        scope.$watch('characterCount', function(newVal, oldVal) {
            scope.characterCount = scope.characterCount.substr(0, scope.maxLength);
        });
      }
    };
  });

angular.module（'bidrAdminApp'））
.directive（'characterCounter'，函数（$compile）{
返回{
限制：“A”，
范围：{
characterCount:'=ngModel'，
maxLength:'=ngMaxlength'
},
链接：函数postLink（范围、元素、属性）{
控制台日志（attrs）；
var el='{{maxLength-characterCount.length}}'；
el=编译（el）（范围）；
$（元素）。在（el）之后；
作用域.$watch（'characterCount'，函数（newVal，oldVal）{
scope.characterCount=scope.characterCount.substr（0，scope.maxLength）；
});
}
};
});
我不建议注册任何
$watcher
。在您的情况下，一个简单的事件侦听器就足够了：


angular
.module（'应用程序'，[]）
.directive（'myMaxCount'，函数（）{
返回{
限制：“A”，
链接：功能（范围、元素、属性）{
var max=attr.myMaxCount；
元素on（'keydown'，keydownHandler）；
作用域：$on（“$destroy”，函数（）{
元素.off（'keydown'，keydownHandler）；
});      
函数keydownHandler（e）{
如果（e.target.value.length+1>最大值）{
e、 预防默认值（）；
}
}
}
};
});
已经有很多答案，但我认为最好不要在angular指令中使用任何Jquery，因为这会使测试变得困难。下面是一个使用$watch执行完全相同任务的解决方案


app=angular.module（“bidrAdminApp”，[]）
.directive（'characterCounter'，函数（$compile）{
返回{
限制：“A”，
范围：{
characterCount:'=ngModel'，
长度限制：'=长度限制'
},
链接：功能（范围、元素、属性）{
作用域$parent.count=attrs.lengthLimit；
作用域.$watch（“characterCount”），函数（newvalue，oldvalue）{
如果（新值）{
scope.$parent.count=attrs.lengthLimit-newvalue.length；
如果（newvalue.length>=attrs.lengthLimit）{
scope.$parent.disabled=true；
}
}
})
}
};
});

{{count}}
最后，这一个确实起了作用，我喜欢它没有那么多开销。
ng-
前缀是为AngularJS核心指令保留的。特别地，
ng model
是为使用的指令保留的。用户创建的指令应使用另一个前缀。有关详细信息，请参阅。