Disable mouse wheel after ng-repeat

Question

I'm trying to disable the mouse-wheel for a number input that gets created as part of an ng-repeat block by using a directive. Currently I'm trying to dynamically assign an id to the input element using ng-attr-id (see below), which seems to work. I then try and pass the dynamic id info to the directive, which also seems to work (the console log message prints the correct id when the directive is called), however, if I dig down into the HTML in developer mode, it looks like the id for the input inside of ng-repeat doesn't actually get generated from the ng-attr-id definition until after the directive has been called, so when it tries to look up the dynamic ID it doesn't find it(?) Can anyone steer me in the right direction?

Here is the HTML:

<div ng-repeat tgen in tgen_list>
    <div id="tgenNum" style="padding-bottom: 40px">
        <label class="form-label-top2" style="float: left; margin-top: 5px; margin-bottom: 5px; margin-left:55px" for="number_tgenelems">
            <font size="2">
                <b>
                    Total Number Traffic Generator Ports:
                </b>
            </font>
        </label> 
        <input type="number" type="submit" class="rf-form-control-sm" onkeydown="return false" ng-attr-id="{{ 'tgentgen_num' + $index }}" name="tgen_num" min="0" max="10" ng-click="addRemoveTgenTgen($index, elem.current_total_tgen_ports, elem.tgen_spinner_val)" ng-model="elem.tgen_spinner_val" style='width: 50px; float: left; margin-top: 12px; margin-left: 25px' />
    </div>
    <disable-mouse-wheel id-name="tgentgen_num" id-index="$index"></disable-mouse-wheel>
</div>

And this is the directive:

angular.module('csvApp').directive('disableMouseWheel', function () {
  return {
    restrict: 'E',
    scope: {
      idName: '@',
      idIndex: '='
    },
    template:'',
    link: function(scope, element, attrs){
      console.log(scope.idName+scope.idIndex.toString())
      numtgen_elem = document.getElementById(scope.idName+scope.idIndex.toString());
  numtgen_elem.addEventListener("mousewheel", function(event){ this.blur() });  
    }
  };
})

you don't need to do this "document.getElementById(scope.idName+scope.idIndex.toString());", you have a ref already with element in the link params, do a console.log(element) and see! — , Mar 12 '18 at 17:09
@StéphaneCharron Thanks - if you can bear with me I'm a bit new to javascript, I see the element data but there's a ton of it...how can I pick the dynamic id out of it? — monkeyWithAMachinegun, Mar 12 '18 at 17:28
i'm trying to explain that element in link function in your directive is a reference to your disable-mouse-wheel DOM element, no need to do gymnastic with id-index / id-name to — , Mar 12 '18 at 17:32
There's a lot of code, but I could email it to you if you really don't mind looking at it...I edited my original question to hopefully be more clear. Right now the element being passed seems to be the div that calls the directive, when I need the input element. I tried just adding a disable-mouse-wheel call into the input element itself but it didn't call the directive (the breakpoint there was never hit). — monkeyWithAMachinegun, Mar 12 '18 at 17:53
@monkeyWithAMachinegun I usually advocate to always use the angular way when developing web apps with angularJS. However, for this particular problem, I think normal javascript is more than enough to accomplish your goal. I think [this question](https://stackoverflow.com/questions/9712295/disable-scrolling-on-input-type-number) could probably help you solve this. — Tyler, Mar 12 '18 at 17:56
https://docs.angularjs.org/api/ng/function/angular.element : angular.element(element).find('input') — , Mar 12 '18 at 17:59
Also, I'm assuming this is a work in progress, but `` and `` tags, while [not fully deprecated, their use is discouraged in favor of css.](https://www.w3.org/TR/html4/present/graphics.html#h-15.2) — Tyler, Mar 12 '18 at 18:04
@Tyler Yeah I've got some underlining in there too...once I get the basic guts working I'll purdy it up. — monkeyWithAMachinegun, Mar 12 '18 at 18:15
@StéphaneCharron I tried that, and it returned an element but I'm not sure it's what I'm after (though I'm likely just referencing it wrong). I tried this : wheelElem = angular.element(element).find('input'); wheelElem.addEventListener("mousewheel", function(event){ this.blur() }); but what comes back doesn't accept the addEventListener method. I did see in the console that wheelElem contained a prevObject element, but that didn't seem to be it either. Do I need to reference something within the element returned from angular.element(element).find('input')? — monkeyWithAMachinegun, Mar 12 '18 at 18:18
normal, find return a JQLite [input] object: angular.element(element).find('input')[0] to get the DOM object and then you can call addEventListener — , Mar 12 '18 at 18:24
Hm, in this case angular.element(element).find('input')[0] returns 'undefined'... — monkeyWithAMachinegun, Mar 12 '18 at 18:27
stephanecharron.stackoverflow@gmail.com : send me the code, will check this tonite — , Mar 12 '18 at 18:32

Disable mouse wheel after ng-repeat

0 Answers0