AngularJS Cannot Set Property of Undefined

Question

Directive:

app.directive('myDialog', ["$timeout", function($timeout) {
  var fade = "fade";

  return {
    template: '<div ng-controller="AccountCtrl" ng-cloak="">' +
              '<div class="ui {{message.type}} message message-overwrite" ng-class="{'+ fade +': enabled} ">' +
              '<div class="header">{{message.title}}</div>' +
              '<p>{{message.content}}</p>' +
              '</div>' +
              '</div>',
    link: $timeout(function($scope) {
      $scope.enabled = true;
      console.log("Test");
    }, 1000)
  };
}]);

When trying to run my directive, I keep getting the error:

angular.js:13550 TypeError: Cannot set property 'enabled' of undefined

But I'm not sure what the proper place to define 'enabled' is.

Chanthu · Accepted Answer · 2017-01-07 01:53:06Z

1

Link function of a directive cannot be set to a $timeout if you want to access the scope. Angular invokes the link function and passes in scope, element and attrs in that order. So, when timeout is used, the inner function, which in your case thinks will be called by angular is not called. $timeout calls that. Not the directive. And that's why it's undefined.

What you could do to fix that is:

link: function($scope) {
    $timeout(function(){
        $scope.enabled = true;
        console.log("Test");
    }, 1000);
}

So, move the timeout inside the link function. And of course you need to inject $timeout into the directive, which you already have.

answered Jan 7, 2017 at 1:53

Chanthu

1,7941 gold badge15 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

AngularJS Cannot Set Property of Undefined

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