Array length different in inner function

Question

I make a custom directive. Now I pass string data from the chips-break attribute and convert it to an array from the link method. It works, but when I get the array length inside the ng-keydown method, it is different.

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 the difference.

mkrieger1 · Accepted Answer · 2023-11-13 09:39:59Z

1

When you use '@' it will get a string so that's why you get length == 11 because you are 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?

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.

edited Nov 13, 2023 at 9:39

mkrieger1

24.2k7 gold badges68 silver badges84 bronze badges

answered May 5, 2016 at 8:14

Chris Hermut

1,7564 gold badges17 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sandeep Over a year ago

yes @Chrish but I convert string into Array so why it's treat as string in inner function

Collectives™ on Stack Overflow

Array length different in inner function

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related