AngularJs Directive - Accessing attributes

Question

I love angularjs, but I get so confused with directives lol.

I have the following:

//postcode grabber
app.directive('postcodes',
    function ($rootScope, $http) {
        return function (scope, element, attrs) {
            element.bind('change', function () {
                var targetSuburb = scope.$eval(attrs.targetSuburb);
                alert(targetSuburb);
                var modal_element = angular.element('#myModal');
                var ctrl = modal_element.controller();
                var url = '/postage/postcodes/?suburb=' + element.val();
                ctrl.setModal(url);
                modal_element.modal('show');
            });
        };
    });

This my HTML:

<input type="text" class='form-control' ng-model="model.suburb" postcodes id='ca_suburb' target-suburb='ca_suburb' target-state='ca_state' target-postcode='ca_postcode'>

The alert is always "undefined" - Is there something I'm missing to be able to access the attributes correctly?

Arun P Johny · Accepted Answer · 2013-09-03 03:52:40Z

1

If you want to access the value of the model then

app.directive('postcodes', function ($rootScope, $http) {
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, controller) {
            element.bind('change', function () {
                console.log(controller.$viewVaue)

                var modal_element = angular.element('#myModal');
                var ctrl = modal_element.controller();
                var url = '/postage/postcodes/?suburb=' + element.val();
                ctrl.setModal(url);
                modal_element.modal('show');
            });
        }
    };
});

Demo: Fiddle

If you are looking to alert ca_suberb then just use

alert(attrs.targetSuburb);

Demo: Fiddle

If ca_suberb is a scope property then your code is working fine

Demo: Fiddle

edited Sep 3, 2013 at 3:52

answered Sep 3, 2013 at 3:39

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

3 Comments

Arun P Johny Over a year ago

@BenKilah what do you actually want to fetch here?

Arun P Johny Over a year ago

@BenKilah if you want the typed value then use ngModel as updated above - it will give you the value of the binded field

Ben Kilah Over a year ago

thanks! - where does controller.$viewVaue come from? couldn't find it in the docs.

zs2020 · Accepted Answer · 2013-09-03 03:45:38Z

0

If you want to get what is typed in, you should access via scope like this

alert(scope.model[attrs.targetSuburb]);

where attrs.targetSuburb should be the field name and it should be set like this since you define the model to be model.suburb

target-suburb='suburb'

edited Sep 3, 2013 at 3:45

answered Sep 3, 2013 at 3:40

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

2 Comments

Ben Kilah Over a year ago

re-used component, it's not always scope.model.suburb - thanks tho!

zs2020 Over a year ago

@BenKilah Updated. basically you need to tell the directive what is the field name

Collectives™ on Stack Overflow

AngularJs Directive - Accessing attributes

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related