0

I'm trying to get a string turned into an array of strings using .split(n), and normally I have no problem with this, but I am encountering a peculiar behavior with angular's involvement.

I have a model, defined very simply;

var _this = $scope;

_this.model = {
    search: {
        value: "",
        run: function() {}
    }
};

Then, I have search.value bound to an ng-model attribute on a text field;

<input type="text" id="search-byName"
               placeholder="Search"
               ng-model="model.search.value"
               ng-change="options.search.run()" ng-model-options="{ debounce: 400 }" />

Seems simple enough; Before my controller initializes, I create and attach the run function.

_this.model.search.run = function() {
    console.log('value: ', _this.model.search.value.split(':'));
};

So I initialize the controller and everything, then I start to type any text into the textbox. I'm met with a javascript error;

TypeError: value.split is not a function

Now here is the interesting part, if I do it just a slight bit differently, it works fine.

_this.model.search.run = function() {
    var $value = _this.model.search.value;
    console.log('value: ', $value.split(':'));
};

Is there a reason, and a workaround, for this behavior?

Ciel
  • 4,290
  • 8
  • 51
  • 110
  • Try doing (_this.model.search.value).split(':'). It may be an order of operations issue. – td-edge Oct 02 '15 at 16:45
  • That doesn't seem to remedy it, though an order of operations issue does sound likely. – Ciel Oct 02 '15 at 16:46
  • what does `ng-delay` do? – charlietfl Oct 02 '15 at 16:46
  • It is old, I meant to remove it. It just encapsulates the behavior to slow down the running of the method by a few seconds; You can see the code I used for it here: http://stackoverflow.com/questions/21121460/angular-directive-encapsulating-a-delay-for-ng-change – Ciel Oct 02 '15 at 16:48
  • I updated it to use the new `ng-model-options="{ debounce: 400 }"`. – Ciel Oct 02 '15 at 16:49
  • 1
    then you are getting ahead of `ng-delay` probably and would likely need to use `$timeout` – charlietfl Oct 02 '15 at 16:49
  • 1
    create a demo that replicates problem, also note that `ng-model` will nullify model properties when they aren't valid using some validation directives – charlietfl Oct 02 '15 at 16:51
  • are you mean `ng-change="model.search.run()"` here `ng-change="options.search.run()"`? try `ng-change="model.search.run(model.search.value)"` – Grundy Oct 02 '15 at 16:56
  • Make sure _this.model.search.value is typeof String. Also, is your ng-change supposed to be at options.search.run or model.search.run? – Caleb Williams Oct 02 '15 at 16:57
  • You were right. I was getting ahead of the delay, and it was firing too early. Changing it to `ng-model-options="{ debounce: 400 }"` fixed the problem! Or ... is that not really fixing it? – Ciel Oct 02 '15 at 17:10
  • Would you post all that as an official answer so I may credit you? – Ciel Oct 02 '15 at 17:17

0 Answers0