Javascript 将模型绑定到textbox后调用事件-Angular

我想为应用程序中的每个文本框（输入）实现一个类似于

绑定完成的事件

在这里，我试图在
onblur
事件中的某些条件下添加一个CSS类。那很好。但我不想在将某个模型绑定到文本框后执行相同的函数

  var app = angular.module("main", []);

  var MainController = function($scope, $http) {
    $scope.message = "CSS Change";
  };
  app.directive('floatBox', ['$document', '$timeout', '$rootScope', function($document, $timeout, $rootScope) {
    return {
      restrict: 'A',
      scope: true,
      link: function(scope, element, attr) {
        //this is not for validation, this is just a sample for what I want to do.
        //Please don't suggest Angular validations.
        element.on('blur', function(event) {
          changeCSSClass(element);
        });

        function changeCSSClass(element) {
          if (element.val().length == 0) {
            element.addClass('red');
            element.removeClass('green');

          } else {
            element.addClass('green');
            element.removeClass('red');
          }
        }
      }
    };
  }]);

HTML:

在文本框中出现一些值后，我想调用
changeCSSClass

请使用pluk进行快速编辑：

基本问题：
当我从文本框
模糊
时，事件工作。但是我想在初始加载本身中显示颜色，即在将模态
消息
绑定到文本框之后。因此，我将获得文本框的长度，并在此基础上设置css类

我不想在所有文本框中使用ng类并使用范围，而是需要一个通用的实现。
您可以将数据绑定到指令，并使用
$watch
：

指令

(function(){

  function directive(){
    return {
      restrict: 'A',
      link: function(scope, element, attr) {
        //this is not for validation, this is just a sample for what I want to do.
        //Please don't suggest Angular validations

        scope.$watch(attr.ngModel, function(){
              changeCSSClass(element);
        });

        function changeCSSClass(data) {
          if (data.length == 0) {
            element.addClass('red');
            element.removeClass('green');
          } else {
            element.addClass('green');
            element.removeClass('red');
          }
        }
      }
    };
};

angular
  .module('app')
  .directive('floatBox', directive);


})();

HTML

<input float-box type="text" ng-model="message">

为什么使用
ng类
是个问题？我经常看到人们寻求帮助，试图重新实现框架的功能，却没有解释为什么他们“不想使用”所说的功能。。。。
(function(){

  function directive(){
    return {
      restrict: 'A',
      link: function(scope, element, attr) {
        //this is not for validation, this is just a sample for what I want to do.
        //Please don't suggest Angular validations

        scope.$watch(attr.ngModel, function(){
              changeCSSClass(element);
        });

        function changeCSSClass(data) {
          if (data.length == 0) {
            element.addClass('red');
            element.removeClass('green');
          } else {
            element.addClass('green');
            element.removeClass('red');
          }
        }
      }
    };
};

angular
  .module('app')
  .directive('floatBox', directive);


})();

<input float-box type="text" ng-model="message">