After deciding to refactor my code and move DOM manipulation and functions into directives instead of controllers, I encountered an issue with accessing variables/objects defined using the controllerAs 'this' syntax. Despite trying to use bindToController in order to pass these objects to the directive, they still return as undefined within the 'link' function.
For example, I have a variable 'this.test' defined in the controller, but when attempting to access it in the directive through a console log message, it remains undefined.
Sample snippet from the controller:
app.controller('notificationsController', function($scope, $state, $http, $document, $mdDialog, $filter, $timeout, $mdToast) {
this.test = 'TEST';
Snippet from the directive:
app.directive('clearNotifications', function($mdDialog, $mdToast, $timeout) {
return {
controller: 'notificationsController',
controllerAs: 'notifications',
scope: {},
bindToController: {
notifications: '=',
filters: '=',
test: '@'
},
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('click', function() {
console.log('notifications.test string test: ' + notifications.test);