I am having trouble accessing the vm.screensize property in the relevant controller. The error message states that vm is not defined. Below you can find the directive and controller code snippets.
angular.module('app.ain.directives')
.directive('ainProjectWizardExplanations', function() {
return {
restrict: 'E',
bindToController: true,
scope : {
sidenavHidden : '='
},
controller: 'ProjectWizardExplanationsController as vm',
templateUrl: function() {
console.log(vm.screensize, vm.animate);
if(vm.screensize) {
return 'app/ain/shared/directives/projectWizardExplanationsMobile.html';
}else {
return 'app/ain/shared/directives/projectWizardExplanations.html';
}
}
};
});
//controller
angular
.module('app.ain.directives')
.controller('ProjectWizardExplanationsController', ProjectWizardExplanationsController);
function ProjectWizardExplanationsController($mdMedia,$scope,$rootScope, $timeout) {
var vm = this;
vm.animate = true;
$scope.$watch(function() { return $mdMedia('sm'); }, function(small) {
vm.screensize = small;
});
}