Angular scope property not accessible from directive in attribute

Question

I have a controller like this:

var exampleController = function($scope, $stateParams){
    $scope.myVariable = $stateParams.id;
    console.log($scope.myVariable);
}

and a directive like:

var exampleDirective = function(){
    return {
        restrict: 'E',
        scope : {
            myVariable: '='
        },
        templateUrl: "myTemplate.html",
        link: function($scope){
               console.log($scope.myVariable);
        });
     };
}

in my html like:

<my-example myVariable="myVariable"></my-example>

Given the id in the url is 21, I got this:

21
undefiend

Do anybody know why I couldn't pass any $stateParams value so that the directive don't see it?

I've tried to pass a static value but it didn't worked too. Tried in this way within the controller:

$scope.myVariable = 26;

myVariable != my-variable Its a typo you missed the hyphen notation there on the view. i.e <my-example my-variable="myVariable"></my-example> — PSL
– PSL, Commented Jan 5, 2015 at 23:01

Ufuk Hacıoğulları · Accepted Answer · 2015-01-06 00:56:10Z

1

You forgot the Angular convention for attribute names:

<my-example my-variable="myVariable"></my-example>

answered Jan 6, 2015 at 0:56

Ufuk Hacıoğulları

38.6k14 gold badges120 silver badges157 bronze badges

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

Collectives™ on Stack Overflow

Angular scope property not accessible from directive in attribute

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related