Angular transclusion and accessing controller scope

Question

I have an angular application set up like this

<div ng-controller"FooCtrl">
  <bar></bar>
</div>

with the script

app.controller('FooCtrl', ['$scope', function($scope) {
  $scope.fn = function() { window.alert("Hello World"); }
}]);
app.directive('bar', function() {
  return {
    restrict: 'AE',
    templateUrl: "/bar.html",
  };
});

and the bar.html partial template being

<button ng-click="fn();">Exec</button>

but clicking that button does NOT work.

I tried adding

...
transclude:true
...

to the directive return, but this was no success.

How do I enable my access to the controller's function within a directive?

Pankaj Parkar · Accepted Answer · 2016-03-21 19:34:33Z

2

There is no need to think of transclusion. Basically you had typo, ng-controller & "FooCtrl" should be separated by = sign

ng-controller="FooCtrl"

Plunkr Here

answered Mar 21, 2016 at 19:34

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Collectives™ on Stack Overflow

Angular transclusion and accessing controller scope

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