Angular JS attribute Directive taking variable

Question

I'm trying to pull in a variable for an angular JS directive used as an attribute.

Let's use petFilter as an example.

HTML:

<input type="text" name="catName" pet-filter='cat'>
<input type="text" name="dogName" pet-filter='dog'>

So that if I enter 'Foxy' and 'Brownie' into the two inputs, I'll get out:

Foxy is a cat!
Brownie is a dog!

What I have so far is:

JS:

.directive('petFilter', function(){
    return {
        restrict: 'A',
        require : 'ngModel',
        scope : true,
        link: function($scope, elem, attrs, ctrl){
            $scope.$watch(attrs.ngModel, function () {
                var temp = ctrl.$viewValue;
                var petType = ????;
                outputFunction( temp + 'is a ' + petType + '!');
            })
        }
    };
})

I'm just stuck at how to set the value of petType.

perhaps: var petType = scope.model[attrs.pet-filter]);

james emanon
– james emanon

2014-01-15 20:11:26 +00:00
Commented Jan 15, 2014 at 20:11 — james emanon
– james emanon, Commented Jan 15, 2014 at 20:11

ilmatic · Accepted Answer · 2014-01-15 20:35:31Z

3

For your example, you don't actually need a $watch, which is for binding to variables on scope. The values "dog" and cat" are located in the attrs which is passed in, which in your case will look something like:

{
    petFilter: "cat"
}

or if you used a different attribute like , it would look like:

{
    petType: "dog"
}

so to use it in your directive you can just access it from the attrs object, like so:

.directive('petFilter', function(){
    return {
        restrict: 'A',
        require : 'ngModel',
        scope : true,
        link: function($scope, elem, attrs, ctrl){
            var petType = attrs.petFilter;

            outputFunction( temp + 'is a ' + petType + '!');
        }
    };
})

EDIT: If you want to watch an attribute on the scope based on the ng-model directive, you're close, all you have to do is add in the arguments for the $watch callback. For this example, let's say your input looks like this:

<input ng-model="petName" petFilter="cat">

Then your directive would look like this:

.directive('petFilter', function(){
    return {
        restrict: 'A',
        require : 'ngModel',
        scope : true,
        link: function($scope, elem, attrs){
            /** The callback we pass in here is called every time the value of the 
                scope expression, which in this case is "petName", changes. **/
            $scope.$watch(attrs.ngModel, function (newValue, oldValue) {

                /** newValue will be equal to $scope.petName. **/
                var temp = newValue;
                var petType = attrs.petFilter;
                outputFunction( temp + 'is a ' + petType + '!');
            })
        }
    };
})

edited Jan 15, 2014 at 20:35

answered Jan 15, 2014 at 20:10

ilmatic

5653 silver badges11 bronze badges

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

4 Comments

Wolfman Joe Over a year ago

This is a simplified version. To expand upon what I'm working towards, as someone types in 'Foxy' they'll get: "F is a cat!" then "Fo is a cat!" then 'Fox is a cat!" then 'Foxy is a cat!' That's why I'm going for a $watch - I want it changing as they enter the text. As for the rest, I'll give it a shot!

Wolfman Joe Over a year ago

Had to swap oldValue and newValue around, but that did the trick! Thank you, very much!

ilmatic Over a year ago

they're actually in the right order, but the very first time it is called during initialization those two values will be equal, so you can do a (newValue !== oldValue) check to make sure it's not the first run

Wolfman Joe Over a year ago

I did the newvalue !== old Value check. But every time I tested the values while typing into the text input, the first argument had the old value while the second argument had the new value.

Collectives™ on Stack Overflow

Angular JS attribute Directive taking variable

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related