scope variable is null in angular directive link function

Question

I'm begginer in angularjs. I have an angular directive and using it ASP.NET MVC project:

'use strict';
app.directive('province', function (Province, $rootScope) {
return {
    restrict: 'E',
    replace: true,
    template: '<select data-ng-model="province" data-ng-options="province.provinceId as province.provinceName for province in provinces" ' +
        'data-ng-change="provinceChanged()"></select>',        
    link: function (scope, element, attr, controller) {            
        Province.get().then(function (provinces) {                
            scope.provinces = provinces;
        });
        console.log(scope.provinces);
        scope.province = false;            
        scope.provinceChanged = function () {
            if (!scope.province) {
                 return;
            }
            $rootScope.$broadcast("provinceChanged", { province: scope.province });
        };
    }        
};
})

This is the way I use it:

<province id="province" class="form-control" data-selected-province="@Model.Province"/>

The select element shows provinces corrctly. Now I want to set a default value for select element. So I use attribute data-selected-province and set it to the value that I get from server(@Model.Province). I think I should loop through scope.provinces and find the index of the province whose provinceId is equal to data-selected-province attribute and set scope.province which is ng-model to that index. But scope.provinces is undefined when I print it to the console using console.log. I have two questions:

why scope.provinces is null?
Is this the correct way of setting default value?

UPDATE

I was a bit confused. The only thing I need to do is set scope.province to attr.selectedProvince. But I still have a problem. When I set scope.province to a constant number like scope.province = 8 it works fine but when I set data-selected-province = 8 it does not work. I can see in firebug that this attribute is equal to 8 when rendering the directive.

Any help is appreciated in advance.

You are will always get undefined because .then is aynsc operation which will take some to complete so before completion of then you are printing scope.provinces which will ultimately give u undefined value — Ajay Singh Beniwal
– Ajay Singh Beniwal, Commented Feb 25, 2014 at 14:38

Ye Liu · Accepted Answer · 2014-02-25 16:29:58Z

1

As Ajay Beniwal pointed out in his comments, Provience.get() is an asynchronous operation, so you need to move the console.log into the callback function to make it work:

Province.get().then(function (provinces) {                
    scope.provinces = provinces;
    console.log(scope.provinces);
});

For your second question, I suggest you make a data-selected-province-id attribute instead of data-selected-province, because attributes are always strings, a simple id value is easier to deal with. Once you have that, you can then try the following in link function:

link: function(scope, element, attr) {
    ...

    scope.provience = attr.selectedProvienceId;

    ...
}

edited Feb 25, 2014 at 16:29

answered Feb 25, 2014 at 15:12

Ye Liu

8,9861 gold badge40 silver badges34 bronze badges

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

5 Comments

Beginner Over a year ago

Actually it should be scope.province = attr.selectedProvinceid. It does not work again. But when I set a constant number like scope.province = 8 it works.

Ye Liu Over a year ago

@Beginner I updated my answer, the attribute should be named as data-selected-province-id, then you can use attr.selectedProvienceId. Are you sure the value of your attr.selectedProvinceid is actually an id?

Beginner Over a year ago

Yes. When I set a constant number it works. I even passed a constant number in the element. data-selected-province-id = "8". I can see in the fire bug that this attribute is 8.

Beginner Over a year ago

SOLVED As @Ye Liu mention the value should be an integer because provinceId that is used in ng-option to generate the options is integer. So scope.province = parseInt(arrt.selectedProvince) solved the problem. Changing attr-selected-province to attr-selected-province-id did not change the type of attribute to int.

Ye Liu Over a year ago

@Beginner That's great! My suggestion is not to use an object in the attribute because it's not clear it's an id or an object in data-selected-province="@Model.Province", it doesn't matter how the attribute is named ;)

Collectives™ on Stack Overflow

scope variable is null in angular directive link function

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