Search code examples
javascripthtmlangularjsdirectiveangularjs-ng-transclude

Angular transclusion and accessing controller scope

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?

Solution

  • 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