javascript - angularjs:在指令中使用 contronllerAs 语法时，vm 未定义

Question

我无法从相关 Controller 访问 vm.screensize 属性。我收到的错误是虚拟机未定义。下面是指令和 Controller 。

    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;
                });
        }

Answer 1

尝试在声明指令时设置“controllerAs”选项。

.directive('ainProjectWizardExplanations', function() {
return {
    restrict: 'E',
    bindToController: true,
    scope : {
        sidenavHidden : '='
    },
    controller: 'ProjectWizardExplanationsController',
    controllerAs: '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';
        }
    }
};
});

希望对你有用:)