Adding a controller to an element directive

Question

When adding a controller to a element directive, for example:

.directive('hello', function() {

   return {     
     restrict: 'E',
     replace: true,
     transclude: true,
     template: '<div class="hello" ng-transclude></div>'
   };

});

I'm unable to access the scope of the controller:

.controller('HelloCtrl', function($scope) {  
  $scope.hello = "Hello World";
});


<hello ng-controller="HelloCtrl">
  <h1>Hello Directive</h1>

  <p>{{ hello }}</p>
</hello>

In this case {{ hello }} is undefined. The directive doesn't create a child nor an isolated scope. I also tried accessing the property with {{ $parent.hello }}.

What is happening here?

I created a CodePen to demonstrate this behaviour: http://codepen.io/jviotti/pen/ktpbE

tgosnell · Accepted Answer · 2014-04-07 18:28:59Z

1

Per the docs...

transclude makes the contents of a directive with this option have access to the scope outside of the directive rather than inside.

Therefore you need to move the ng-controller="HelloCtrl" declaration to an element higher up in scope.

Here is your CodePen fixed http://codepen.io/anon/pen/BjKHG

answered Apr 7, 2014 at 18:28

tgosnell

263 bronze badges

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

2 Comments

jviotti Over a year ago

Is there any other way to accomplish this without putting the controller in an element higher in the scope?

tgosnell Over a year ago

You could just assign the controller in the directive definition using the controller property

Collectives™ on Stack Overflow

Adding a controller to an element directive

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related