Search code examples
angularjsscopeangular-directive

Custom directive scope element visible but undefined


I made a custom directive that retrieves data from a controller.

My variable is visible inside the scope element but when trying to access it, I got undefined

HTML

<map borders="vm.borders"></map>

Directive

angular.module('myApp.directives')
.directive('map', [ function() {
    return {
        restrict: 'E',
        scope: {
            borders: '='
        },
        link: function(scope, element, attrs) {
            console.log(scope); //cfr linked image
            console.log(scope.borders) //undefined
        }
    }
}]);

Here is the scope. It contains the borders variable.

scope console

What am I missing to retrieve this borders value ?


Solution

  • I could suggest to add an ng-if to the directive, because for example if vm.borders are got from a promise, ng-if is required:

    <map borders="vm.borders" ng-if="vm.borders"></map>