When I have HTML structured like this...
<div ng-app="myApp">
<div ng-controller="inControl">
I enjoy sipping on {{beverage}}<br>
<input my-dir ng-model="beverage"></input>
</div>
</div>
and my JavaScript looks like this...
var app = angular.module('myApp', []);
app.controller('inControl', function($scope) {
$scope.beverage = 'juice';
});
app.directive('myDir', function(){
return {
restrict: 'A',
link: function($scope, element, attrs, ctrl) {
// Why am I getting undefined when logging the controller?
console.log(ctrl);
}
};
});
Why am I unable to access the controller from within my directive? Why is ctrl returning undefined?
UPDATE: Here's a demo for reference...