2

I make a custom directive. now I pass string data from chips-break attribute and convert it an array from link method. it work perfect. but when I getting array length inside ng-keydown method it different. please help me. thanks in advanced :

HTML

<input-chips chips-break="32, 13, 188" style="width:80%"></input-chips>

JS

    var app = angular.module("myApp", []);
    app.directive("inputChips", inputChipsFun);

    function inputChipsFun(){
      return{
        restrict : 'EA',
        scope : {
          chipsBreak : "@"
        },
        template: '<div class="chips"><div class="chips-item"></div><input type="text" ng-keydown="inputKeyDown($event, false)"/></div>',
        link : function(scope, elem, attr){
          scope.chipsBreak = scope.chipsBreak.split(",");
          console.log("Length of Chips Break First Time = "+scope.chipsBreak.length);

          scope.inputKeyDown = function($event, is_blur){
            console.log("Length of Chips Break Key Press = " + scope.chipsBreak.length);
          }


        }
      };
    }

see this link : https://plnkr.co/edit/RpDwaqjS81DZlZFEzdj2?p=preview open inspect element console and type some things and see difference

Sandeep
  • 1,461
  • 13
  • 26

1 Answers1

1

When you use '@' it will get a string so that's why you get length == 11 because you getting character count in '32, 13, 188' string.

Check this post for more details What is the difference between '@' and '=' in directive scope in AngularJS?

Edit:

    link : function(scope, elem, attr){
      var x = scope.chipsBreak.split(",");
      console.log("Length of Chips Break First Time = "+scope.chipsBreak.length);

      scope.inputKeyDown = function($event, is_blur){
        console.log("Length of Chips Break Key Press = " + x.length);
      }
    }

If you'll do scope.chipsBreak = scope.chipsBreak.split(",") your scope.inputKeyDown (which is a function) will get initial value of scope.chipsBreak which is a string.

Community
  • 1
  • 1
Chris Hermut
  • 1,708
  • 3
  • 17
  • 32