How to create a "standalone" AngularJS directive?

V

vasIvas2015-07-18 22:47:30

Angular

vasIvas, 2015-07-18 22:47:30

I started playing AngularJS not so long ago and I'm just going to create something real on it.
Today, a Toaster question about directives pointed to a gap that I was never able to close.
You can explain for a long time what exactly I'm asking about, and therefore I'll show it better -

<ng-custom-input remove-char="s"></ng-custom-input>

Is it possible to create "something" so self-contained that by writing the code above,
an input would appear on the page that would remove all the specified characters when entering?
They explained to me a little how to create using the model, but this method obliges to
write the model in the directive tag, and where the model is there and the controller. So
the charm of the component is lost .. At least in words.
**UPD:**

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>angular</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
</head>
<body ng-app="app">
  <script>
    var app = angular.module('app', []);
    app.controller('InputRemoveCharController', ['$scope', function($scope){
      this.model = {
        value: ''
      };
    }]);

    app.directive('inputDirective', ['$injector', function(){
      return {
        require: '?ngModel' ,
        link: function($scope, iElm, iAttrs, model) {
          if(!model){
            return;
          }

          var charForRemove = iAttrs.char;
          
          model.$setViewValue = function(value){
            if(value.indexOf(charForRemove) > -1){
              value = value.replace('s', '');
              model.$setViewValue(value);
              model.$render();
            }
          };
        }
      };
    }]);

  </script>
  <div ng-controller="InputRemoveCharController as inputRemoveCharController">
    <input type="text" input-directive char="s" ng-model="inputRemoveCharController.model.value">
  </div>
</body>
</html>

***UPD: 2***

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>angular</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
</head>
<body ng-app="app">
  <script>
    var app = angular.module('app', []);
    app.controller('InputRemoveCharController', ['$scope', function($scope){
      this.model = {
        value: ''
      };
    }]);

    app.directive('inputDirective', ['$injector', function(){
      return {
        require: '?ngModel' ,
        link: function($scope, iElm, iAttrs, model) {
          if(!model){
            return;
          }

          var charForRemove = iAttrs.char;

          model.$parsers.push(removeChar);

          function removeChar(string){
            if(string.indexOf(charForRemove) > -1){
              string = string.replace(charForRemove, '');
              model.$setViewValue(string);
              model.$render();
            }
          }
        }
      };
    }]);

  </script>
  <div ng-controller="InputRemoveCharController as inputRemoveCharController">
    <input type="text" input-directive char="s" ng-model="inputRemoveCharController.model.value">
  </div>
</body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

S

Sergey, 2015-07-19
@vasIvas

where is the model and controller

And what's wrong with that? Do you want a piece of code in jquery style? you can shove everything into a link and pray that everything will work.
In Angular, for two-way data binding to inputs, the ngModel directive is used. That is, in general, everything that wants to change the data should depend on it. That's all.