AngularJS passing an attribute value as a parameter in a function called by ng-change

Question

I can't seem to wrap my mind around how I would pull this off. I have a directive which looks like the following:

.directive('seqWidget', ['Sequence', function(Sequence){
    return {        
        restrict: 'E',
        scope: {
            placeholder: '@',
            option: '@'
        },
        template: '<fieldset><legend data-ng-transclude></legend><input type="text" placeholder = {{placeholder}} autofocus data-ng-model="index" data-ng-change="retrieve({{option}});"/>{{output}}</fieldset>',
        replace: true,
        transclude: true,
        link: function ($scope, $elem, $attr){

            $scope.retrieve = function(key){
                //var option = $attr.option;
                console.log(key);
            }
        }
    }
}]);

My HTML is as such:

<seq-widget placeholder="Index 0-400" option="accurate">Which index number would you like to gain accuracy on?</seq-widget>

I have tried several other ways of accomplishing a dynamic way of changing my function call based on an attribute value. I would use the '&' prefix but I'd like for this function to be triggered anytime the input is changed. Is there a practical way to achieve what I am trying to do? Or do I need to use jQuery to say something like $('input').on('change', function(){}); in my link function?

PSL · Accepted Answer · 2014-10-18 23:58:29Z

2

You do not have to pass option it is already in the scope, while you set up a text binding option: '@'.

So just do:-

        $scope.retrieve = function(key){
            console.log($scope.option);
        }

It will also work if you remove interpolation, you do not have to interpolate scope variables in an expression.

 data-ng-change="retrieve(option);"

answered Oct 18, 2014 at 23:58

PSL

124k21 gold badges257 silver badges243 bronze badges

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

5 Comments

papiro Over a year ago

I'm still getting a console log of "undefined", even after I removed "option" as a parameter from "retrieve()", and just did console.log($scope.option) in my $scope.retrieve function definition in my directive's link function, just like you demonstrated.

PSL Over a year ago

You may be doing something wrong, check this plnkr.co/edit/X1LnFy?p=preview

papiro Over a year ago

but also, to access the value of the option attribute ("accurate" in this case), I believe you must use interpolation as accurate becomes available as a string...just like how the value of "placeholder" in <seq-widget> gets interpolated into the new placeholder attribute of the template.

PSL Over a year ago

@papiro That was no clear in your question. Is accurate a scope variable? Then just do interpolation in your widget element. i.e option="{{accurate}}" You need to remember that @ is text binding (one -way) if you need 2 way binding you need to use = and no interpolation. Check the same demo link in my prev comment for update.

papiro Over a year ago

I am so sorry, you were correct. I feel like an idiot. I actually had two <seq-widget> elements and I had the "option" attribute on the second one but, for some superfluous reason was testing my code out by typing into the first one....

Collectives™ on Stack Overflow

AngularJS passing an attribute value as a parameter in a function called by ng-change

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related