Passing though an attribute in an Angularjs directive

Question

I'm working a directive that is just a wrapper for the freebase search widget (jquery). This is the first directive I've tried making and I'm running into some problems.

Desired functionality: 1. ability to pass in language (two letter code) for display search results as an attribute 2. ability to specify a function to be called when item is selected (passing through data from selection)

I've setup a plunkr with the directive here. The second bit of functionality works just fine, but I'm having trouble with the language requirement and I'm not sure why.

Passing in the language code works fine when doing it statically (not interpolated):

if(attrs.lang){
     language = attrs.lang;
}

But I can't seem to get it to work when trying to pass in the value like this:

attrs.$observe('lang', function(value) {
      if(value === ""){
           language = 'en';
      } else {
          console.log("lang val " + value);
          language = value;
      }
});

Any idea why this is not working? Any advice would be appreciated.

The directive as it stands:

directive('suggest', function($http) {
    var language; 
    return {
        restrict: 'E',
        template: "<input type='text'>",
        replace:true,
        scope:{
            selectData:'=',
            onSelect:'&'
        },
        link: function(scope, element, attrs) {

            attrs.$observe('lang', function(value) {
                if(value === ""){
                    language = 'en';
                } else {
                    console.log("lang val " + value);
                    language = value;
                }
            });

            if(attrs.lang){
                language = attrs.lang;
            }


            $(element).suggest({

                "lang": language
            })
            .bind("fb-select", function(e, info) { 
                console.log(info);
                scope.onSelect({data:info});
                console.log("language: " + language);
                scope.$apply(function(){
                    console.log("hello apply here");
                    scope.selectData = info;
                });
            });
        }
    };
});

score 1 · Accepted Answer · answered Jan 30 '14 at 00:02

It is not clear from your question, but I think you mean the following problem: when in plunker demo I type 'fr' to the language and then enter something to suggest box it gets results for 'en' language instead.

This is because you already initialized suggest plugin with default language (en). The function provided to $observe function is not called right here - it will be called later, after your directive is initialized. So when language is changed you need to re-initialize the suggest plugin.

I'm not sure what is the correct way to do that as I'm not familiar with that plugin, but at least the following change is working - just added re-initialization to the $observe listener:

    attrs.$observe('lang', function(value) {
      console.log("lang val " + value);
        language = value;
        $(element).suggest({lang: language});
    });

This is perfect. Thanks so much for your help GRaAL. I didn't recognize the suggest code as an initialization and thought it ran every time. Much appreciated! :) — bornytm, Jan 30 '14 at 00:48
No, the `link` method is called once for each element that has that directive. Use event listeners, `$observe` or `$watch` to react on events or changes. — GRaAL, Jan 30 '14 at 00:52

Passing though an attribute in an Angularjs directive

1 Answers1